
<!DOCTYPE HTML>
<html lang="zh-hans" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>6.Flutter 技术总结 · Gary的小窝</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.3">
        <meta name="author" content="Gary">
        
        
    
    <link rel="stylesheet" href="../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-prism/prism-solarizedlight.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-search-pro/search.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-expandable-chapters/expandable-chapters.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-splitter/splitter.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-tbfed-pagefooter/footer.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-anchor-navigation-ex/style/plugin.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-theme-comscore/test.css">
                
            
        

    

    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="../vue/" />
    
    
    <link rel="prev" href="image.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="输入并搜索" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../">
            
                <a href="../">
            
                    
                    写在前面
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="../leetcode/">
            
                <a href="../leetcode/">
            
                    
                    Leetcode之旅
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="../leetcode/1.html">
            
                <a href="../leetcode/1.html">
            
                    
                    1.两数之和
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="../leetcode/2.html">
            
                <a href="../leetcode/2.html">
            
                    
                    2.两数相加
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.3" data-path="../leetcode/3.html">
            
                <a href="../leetcode/3.html">
            
                    
                    3.无重复字符的最长子串
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.4" data-path="../leetcode/4.html">
            
                <a href="../leetcode/4.html">
            
                    
                    4.寻找两个有序数组的中位数
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.5" data-path="../leetcode/6.html">
            
                <a href="../leetcode/6.html">
            
                    
                    6.Z字形变换
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.6" data-path="../leetcode/9.html">
            
                <a href="../leetcode/9.html">
            
                    
                    9.回文数
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.7" data-path="../leetcode/11.html">
            
                <a href="../leetcode/11.html">
            
                    
                    11.盛最多水的容器
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.8" data-path="../leetcode/12.html">
            
                <a href="../leetcode/12.html">
            
                    
                    12.整数转罗马数字
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.9" data-path="../leetcode/13.html">
            
                <a href="../leetcode/13.html">
            
                    
                    13.罗马数字转整数
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.10" data-path="../leetcode/14.html">
            
                <a href="../leetcode/14.html">
            
                    
                    14.最长公共前缀
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.11" data-path="../leetcode/322.html">
            
                <a href="../leetcode/322.html">
            
                    
                    322.零钱兑换
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.12" data-path="../leetcode/72.html">
            
                <a href="../leetcode/72.html">
            
                    
                    72.编辑距离
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="./">
            
                <a href="./">
            
                    
                    Flutter从入门到放弃
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="dart1.html">
            
                <a href="dart1.html">
            
                    
                    1.Dart语言(1)
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="dart2.html">
            
                <a href="dart2.html">
            
                    
                    2.Dart语言(2)
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.3" data-path="widget1.html">
            
                <a href="widget1.html">
            
                    
                    3.Flutter初始化
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.4" data-path="containerText.html">
            
                <a href="containerText.html">
            
                    
                    4.Container和Text组件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.5" data-path="image.html">
            
                <a href="image.html">
            
                    
                    5.Image组件
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.3.6" data-path="chapter2.html">
            
                <a href="chapter2.html">
            
                    
                    6.Flutter 技术总结
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="../vue/">
            
                <a href="../vue/">
            
                    
                    Vue组件精讲
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.4.1" data-path="../vue/1.html">
            
                <a href="../vue/1.html">
            
                    
                    1.provide/inject
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.2" data-path="../vue/2.html">
            
                <a href="../vue/2.html">
            
                    
                    2.手动实现broadcast和dispatch方法
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.3" data-path="../js/form.html">
            
                <a href="../js/form.html">
            
                    
                    3.自己动手实现带校验的Form表单组件
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="../js/">
            
                <a href="../js/">
            
                    
                    JavaScript进阶
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.1" data-path="../js/proxy.html">
            
                <a href="../js/proxy.html">
            
                    
                    1.Vue.js 3.0中的响应式
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.2" data-path="../js/el.html">
            
                <a href="../js/el.html">
            
                    
                    2.Element UI 源码初探
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.3" data-path="../js/bind.html">
            
                <a href="../js/bind.html">
            
                    
                    3.bind的模拟实现
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.4" data-path="../js/proto.html">
            
                <a href="../js/proto.html">
            
                    
                    4.JS原型和原型链
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.5" data-path="../js/call.html">
            
                <a href="../js/call.html">
            
                    
                    5.模拟实现call和apply
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.6" data-path="../js/ui.html">
            
                <a href="../js/ui.html">
            
                    
                    6.使用Vue cli3搭建组件库并发布到 npm
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.7" data-path="../js/microFE.html">
            
                <a href="../js/microFE.html">
            
                    
                    7.记一次基于qiankun的微前端的改造
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.8" data-path="../js/git.html">
            
                <a href="../js/git.html">
            
                    
                    8.Git的使用
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="../vueLibrary/">
            
                <a href="../vueLibrary/">
            
                    
                    基于Vue的PC端的组件库
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.6.1" data-path="../vueLibrary/1.html">
            
                <a href="../vueLibrary/1.html">
            
                    
                    1.环境搭建
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="../life/">
            
                <a href="../life/">
            
                    
                    网事杂谈
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.7.1" data-path="../life/1.html">
            
                <a href="../life/1.html">
            
                    
                    1.周杰伦专辑赏析--叶惠美
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.2" data-path="../life/2.html">
            
                <a href="../life/2.html">
            
                    
                    2.周杰伦专辑赏析--七里香
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            本书使用 GitBook 发布
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href=".." >6.Flutter 技术总结</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <div id="anchor-navigation-ex-navbar"><i class="fa fa-navicon"></i><ul><li><span class="title-icon "></span><a href="#flutter-&#x6280;&#x672F;&#x603B;&#x7ED3;&#x5206;&#x4EAB;"><b></b>Flutter &#x6280;&#x672F;&#x603B;&#x7ED3;&#x5206;&#x4EAB;</a></li><ul><li><span class="title-icon "></span><a href="#&#x524D;&#x8A00;"><b></b>&#x524D;&#x8A00;</a></li><li><span class="title-icon "></span><a href="#flutter-&#x662F;&#x4EC0;&#x4E48;"><b></b>Flutter &#x662F;&#x4EC0;&#x4E48;</a></li><li><span class="title-icon "></span><a href="#&#x79FB;&#x52A8;&#x5F00;&#x53D1;&#x6280;&#x672F;&#x7B80;&#x4ECB;"><b></b>&#x79FB;&#x52A8;&#x5F00;&#x53D1;&#x6280;&#x672F;&#x7B80;&#x4ECB;</a></li><ul><li><span class="title-icon "></span><a href="#&#x539F;&#x751F;&#x5F00;&#x53D1;&#x4E0E;&#x8DE8;&#x5E73;&#x53F0;&#x6280;&#x672F;"><b></b>&#x539F;&#x751F;&#x5F00;&#x53D1;&#x4E0E;&#x8DE8;&#x5E73;&#x53F0;&#x6280;&#x672F;</a></li><li><span class="title-icon "></span><a href="#&#x8DE8;&#x5E73;&#x53F0;&#x6280;&#x672F;&#x7B80;&#x4ECB;"><b></b>&#x8DE8;&#x5E73;&#x53F0;&#x6280;&#x672F;&#x7B80;&#x4ECB;</a></li></ul><li><span class="title-icon "></span><a href="#flutter-&#x4E3A;&#x4EC0;&#x4E48;&#x5FEB;&#xFF1F;flutter-&#x76F8;&#x6BD4;-rn-&#x7684;&#x4F18;&#x52BF;&#x5728;&#x54EA;&#x91CC;&#xFF1F;"><b></b>Flutter &#x4E3A;&#x4EC0;&#x4E48;&#x5FEB;&#xFF1F;Flutter &#x76F8;&#x6BD4; RN &#x7684;&#x4F18;&#x52BF;&#x5728;&#x54EA;&#x91CC;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#dart-&#x8BED;&#x8A00;"><b></b>Dart &#x8BED;&#x8A00;</a></li><li><span class="title-icon "></span><a href="#dart&#x4E2D;&#x7684;&#x5F02;&#x6B65;&#x652F;&#x6301;"><b></b>dart&#x4E2D;&#x7684;&#x5F02;&#x6B65;&#x652F;&#x6301;</a></li><ul><li><span class="title-icon "></span><a href="#future"><b></b>Future</a></li><li><span class="title-icon "></span><a href="#futurethen"><b></b>Future.then</a></li><li><span class="title-icon "></span><a href="#futurecatcherror"><b></b>Future.catchError</a></li><li><span class="title-icon "></span><a href="#futurewhencomplete"><b></b>Future.whenComplete</a></li><li><span class="title-icon "></span><a href="#futurewait"><b></b>Future.wait</a></li></ul><li><span class="title-icon "></span><a href="#dart-ui-as-code"><b></b>Dart UI as Code</a></li><li><span class="title-icon "></span><a href="#flutter-&#x600E;&#x4E48;&#x5199;"><b></b>Flutter &#x600E;&#x4E48;&#x5199;</a></li><ul><li><span class="title-icon "></span><a href="#widget-&#x5E03;&#x5C40;"><b></b>Widget &#x5E03;&#x5C40;</a></li><li><span class="title-icon "></span><a href="#statelesswidget"><b></b>StatelessWidget</a></li><li><span class="title-icon "></span><a href="#statefulwidget"><b></b>StatefulWidget</a></li></ul><li><span class="title-icon "></span><a href="#state-management"><b></b>State Management</a></li><ul><li><span class="title-icon "></span><a href="#inheritedwidget"><b></b>InheritedWidget</a></li><li><span class="title-icon "></span><a href="#bloc"><b></b>BlOC</a></li></ul><li><span class="title-icon "></span><a href="#&#x4E0E;&#x540E;&#x7AEF;&#x7684;&#x901A;&#x4FE1;"><b></b>&#x4E0E;&#x540E;&#x7AEF;&#x7684;&#x901A;&#x4FE1;</a></li><ul><li><span class="title-icon "></span><a href="#1-&#x901A;&#x8FC7;httpclient&#x53D1;&#x8D77;http&#x8BF7;&#x6C42;"><b></b>1 &#x901A;&#x8FC7;HttpClient&#x53D1;&#x8D77;HTTP&#x8BF7;&#x6C42;</a></li><li><span class="title-icon "></span><a href="#2http&#x8BF7;&#x6C42;-dio-http&#x5E93;"><b></b>2.Http&#x8BF7;&#x6C42;-Dio http&#x5E93;</a></li></ul><li><span class="title-icon "></span><a href="#&#x6D4B;&#x8BD5;"><b></b>&#x6D4B;&#x8BD5;</a></li><li><span class="title-icon "></span><a href="#&#x5305;&#x7BA1;&#x7406;&#xFF0C;&#x8D44;&#x6E90;&#x7BA1;&#x7406;"><b></b>&#x5305;&#x7BA1;&#x7406;&#xFF0C;&#x8D44;&#x6E90;&#x7BA1;&#x7406;</a></li><li><span class="title-icon "></span><a href="#&#x751F;&#x547D;&#x5468;&#x671F;"><b></b>&#x751F;&#x547D;&#x5468;&#x671F;</a></li><li><span class="title-icon "></span><a href="#&#x4F7F;&#x7528;&#x539F;&#x751F;&#x80FD;&#x529B;"><b></b>&#x4F7F;&#x7528;&#x539F;&#x751F;&#x80FD;&#x529B;</a></li><ul><li><span class="title-icon "></span><a href="#&#x5982;&#x4F55;&#x83B7;&#x53D6;&#x5E73;&#x53F0;&#x4FE1;&#x606F;"><b></b>&#x5982;&#x4F55;&#x83B7;&#x53D6;&#x5E73;&#x53F0;&#x4FE1;&#x606F;</a></li></ul><li><span class="title-icon "></span><a href="#flutter-web-flutter-desktop"><b></b>Flutter Web, Flutter Desktop</a></li></ul></ul></div><a href="#flutter-&#x6280;&#x672F;&#x603B;&#x7ED3;&#x5206;&#x4EAB;" id="anchorNavigationExGoTop"><i class="fa fa-arrow-up"></i></a><h1 id="flutter-&#x6280;&#x672F;&#x603B;&#x7ED3;&#x5206;&#x4EAB;"><a name="flutter-&#x6280;&#x672F;&#x603B;&#x7ED3;&#x5206;&#x4EAB;" class="anchor-navigation-ex-anchor" href="#flutter-&#x6280;&#x672F;&#x603B;&#x7ED3;&#x5206;&#x4EAB;"><i class="fa fa-link" aria-hidden="true"></i></a>Flutter &#x6280;&#x672F;&#x603B;&#x7ED3;&#x5206;&#x4EAB;</h1>
<p><img src="https://i.loli.net/2019/11/24/A5aYkLwgRrEZlMV.jpg" alt="11525642-20add9a2fdd2861d.jpg"></p>
<h2 id="&#x524D;&#x8A00;"><a name="&#x524D;&#x8A00;" class="anchor-navigation-ex-anchor" href="#&#x524D;&#x8A00;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x524D;&#x8A00;</h2>
<p> &#x7ED3;&#x5408;<a href="https://flutterchina.club/get-started/install/" target="_blank">&#x5B98;&#x65B9;&#x6587;&#x6863;</a>&#x548C;&#x300A;Fluuter&#x6280;&#x672F;&#x4E0E;&#x5165;&#x95E8;&#x5B9E;&#x8DF5;&#x300B;&#x4E66;&#x7C4D; &#x8BE6;&#x7EC6;&#x9610;&#x8FF0;Flutter&#x6280;&#x672F;&#xFF0C;&#x6D89;&#x53CA;Dart&#x8BED;&#x8A00;&#xFF0C;Flutter Widget&#xFF0C;Flutter&#x72B6;&#x6001;&#x7BA1;&#x7406;&#x7B49;&#x3002;</p>
<h2 id="flutter-&#x662F;&#x4EC0;&#x4E48;"><a name="flutter-&#x662F;&#x4EC0;&#x4E48;" class="anchor-navigation-ex-anchor" href="#flutter-&#x662F;&#x4EC0;&#x4E48;"><i class="fa fa-link" aria-hidden="true"></i></a>Flutter &#x662F;&#x4EC0;&#x4E48;</h2>
<blockquote>
<p>Flutter is Google&#x2019;s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.</p>
</blockquote>
<p>Flutter&#x662F;&#x7531;&#x539F; Google Chrome &#x56E2;&#x961F;&#x6210;&#x5458;&#xFF0C;&#x5229;&#x7528; Chrome 2D &#x6E32;&#x67D3;&#x5F15;&#x64CE;&#xFF0C;&#x7136;&#x540E;&#x7CBE;&#x7B80; CSS &#x5E03;&#x5C40;&#x6F14;&#x53D8;&#x800C;&#x6765;&#x3002;&#x67B6;&#x6784;&#x56FE;&#x5982;&#x4E0B;&#x56FE;
<img src="https://i.loli.net/2019/11/17/AnBwTMHOFsdvREx.png" alt="1.jpg"></p>
<ul>
<li>Flutter &#x5728;&#x5404;&#x4E2A;&#x539F;&#x751F;&#x7684;&#x5E73;&#x53F0;&#x4E2D;&#xFF0C;&#x4F7F;&#x7528;&#x81EA;&#x5DF1;&#x7684; C++&#x7684;&#x5F15;&#x64CE;&#x6E32;&#x67D3;&#x754C;&#x9762;&#xFF0C;&#x6CA1;&#x6709;&#x4F7F;&#x7528; webview&#xFF0C;&#x4E5F;&#x4E0D;&#x50CF; RN&#x3001;NativeScript &#x4E00;&#x6837;&#x4F7F;&#x7528;&#x7CFB;&#x7EDF;&#x7684;&#x7EC4;&#x4EF6;&#x3002;&#x7B80;&#x5355;&#x6765;&#x8BF4;&#x5E73;&#x53F0;&#x53EA;&#x662F;&#x7ED9; Flutter &#x63D0;&#x4F9B;&#x4E00;&#x4E2A;&#x753B;&#x5E03;&#x3002;</li>
<li>&#x754C;&#x9762;&#x4F7F;&#x7528; Dart &#x8BED;&#x8A00;&#x5F00;&#x53D1;&#xFF0C;&#x8C8C;&#x4F3C;&#x552F;&#x4E00;&#x652F;&#x6301; JIT&#xFF08;Just-In-Time&#xFF09;&#xFF0C;&#x548C; AOT &#xFF08;Ahead-Of-Time&#xFF09;&#x6A21;&#x5F0F;&#x7684;&#x5F3A;&#x7C7B;&#x578B;&#x8BED;&#x8A00;&#x3002;</li>
<li>&#x5199;&#x6CD5;&#x975E;&#x5E38;&#x7684;&#x73B0;&#x4EE3;&#xFF0C;&#x58F0;&#x660E;&#x5F0F;&#xFF0C;&#x7EC4;&#x4EF6;&#x5316;&#xFF0C;Composition &gt; inheritance&#xFF0C;&#x54CD;&#x5E94;&#x5F0F;&#x2026;&#x2026;&#x5C31;&#x662F;&#x73B0;&#x5728;&#x524D;&#x7AEF;&#x6D41;&#x884C;&#x7684;&#x8FD9;&#x4E00;&#x5957;</li>
<li>&#x4E00;&#x5957;&#x4EE3;&#x7801;&#x641E;&#x5B9A;&#x6240;&#x6709;&#x5E73;&#x53F0;&#x3002;</li>
</ul>
<h2 id="&#x79FB;&#x52A8;&#x5F00;&#x53D1;&#x6280;&#x672F;&#x7B80;&#x4ECB;"><a name="&#x79FB;&#x52A8;&#x5F00;&#x53D1;&#x6280;&#x672F;&#x7B80;&#x4ECB;" class="anchor-navigation-ex-anchor" href="#&#x79FB;&#x52A8;&#x5F00;&#x53D1;&#x6280;&#x672F;&#x7B80;&#x4ECB;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x79FB;&#x52A8;&#x5F00;&#x53D1;&#x6280;&#x672F;&#x7B80;&#x4ECB;</h2>
<p>&#x5148;&#x4E3B;&#x8981;&#x4ECB;&#x7ECD;&#x4E00;&#x4E0B;&#x79FB;&#x52A8;&#x5F00;&#x53D1;&#x6280;&#x672F;&#x7684;&#x8FDB;&#x5316;&#x5386;&#x7A0B;&#xFF0C;&#x4E3B;&#x8981;&#x662F;&#x60F3;&#x8BA9;&#x8BFB;&#x8005;&#x77E5;&#x9053;Flutter&#x6280;&#x672F;&#x51FA;&#x73B0;&#x7684;&#x80CC;&#x666F;&#x3002;&#x7B14;&#x8005;&#x8BA4;&#x4E3A;&#xFF0C;&#x4E86;&#x89E3;&#x4E00;&#x95E8;&#x65B0;&#x6280;&#x672F;&#x51FA;&#x73B0;&#x7684;&#x80CC;&#x666F;&#x662F;&#x975E;&#x5E38;&#x91CD;&#x8981;&#x7684;&#xFF0C;&#x56E0;&#x4E3A;&#x53EA;&#x6709;&#x4E86;&#x89E3;&#x4E4B;&#x524D;&#x662F;&#x4EC0;&#x4E48;&#x6837;&#x7684;&#xFF0C;&#x624D;&#x80FD;&#x7406;&#x89E3;&#x4E3A;&#x4EC0;&#x4E48;&#x4F1A;&#x662F;&#x73B0;&#x5728;&#x8FD9;&#x6837;&#x3002;</p>
<h3 id="&#x539F;&#x751F;&#x5F00;&#x53D1;&#x4E0E;&#x8DE8;&#x5E73;&#x53F0;&#x6280;&#x672F;"><a name="&#x539F;&#x751F;&#x5F00;&#x53D1;&#x4E0E;&#x8DE8;&#x5E73;&#x53F0;&#x6280;&#x672F;" class="anchor-navigation-ex-anchor" href="#&#x539F;&#x751F;&#x5F00;&#x53D1;&#x4E0E;&#x8DE8;&#x5E73;&#x53F0;&#x6280;&#x672F;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x539F;&#x751F;&#x5F00;&#x53D1;&#x4E0E;&#x8DE8;&#x5E73;&#x53F0;&#x6280;&#x672F;</h3>
<p>&#x539F;&#x751F;&#x5F00;&#x53D1;</p>
<p>&#x539F;&#x751F;&#x5E94;&#x7528;&#x7A0B;&#x5E8F;&#x662F;&#x6307;&#x67D0;&#x4E00;&#x4E2A;&#x79FB;&#x52A8;&#x5E73;&#x53F0;&#xFF08;&#x6BD4;&#x5982;iOS&#x6216;&#x5B89;&#x5353;&#xFF09;&#x6240;&#x7279;&#x6709;&#x7684;&#x5E94;&#x7528;&#xFF0C;&#x4F7F;&#x7528;&#x76F8;&#x5E94;&#x5E73;&#x53F0;&#x652F;&#x6301;&#x7684;&#x5F00;&#x53D1;&#x5DE5;&#x5177;&#x548C;&#x8BED;&#x8A00;&#xFF0C;&#x5E76;&#x76F4;&#x63A5;&#x8C03;&#x7528;&#x7CFB;&#x7EDF;&#x63D0;&#x4F9B;&#x7684;SDK API&#x3002;&#x6BD4;&#x5982;Android&#x539F;&#x751F;&#x5E94;&#x7528;&#x5C31;&#x662F;&#x6307;&#x4F7F;&#x7528;Java&#x6216;Kotlin&#x8BED;&#x8A00;&#x76F4;&#x63A5;&#x8C03;&#x7528;Android SDK&#x5F00;&#x53D1;&#x7684;&#x5E94;&#x7528;&#x7A0B;&#x5E8F;&#xFF1B;&#x800C;iOS&#x539F;&#x751F;&#x5E94;&#x7528;&#x5C31;&#x662F;&#x6307;&#x901A;&#x8FC7;Objective-C&#x6216;Swift&#x8BED;&#x8A00;&#x76F4;&#x63A5;&#x8C03;&#x7528;iOS SDK&#x5F00;&#x53D1;&#x7684;&#x5E94;&#x7528;&#x7A0B;&#x5E8F;&#x3002;&#x539F;&#x751F;&#x5F00;&#x53D1;&#x6709;&#x4EE5;&#x4E0B;&#x4E3B;&#x8981;&#x4F18;&#x52BF;&#xFF1A;</p>
<ul>
<li>&#x53EF;&#x8BBF;&#x95EE;&#x5E73;&#x53F0;&#x5168;&#x90E8;&#x529F;&#x80FD;&#xFF08;GPS&#x3001;&#x6444;&#x50CF;&#x5934;&#xFF09;&#xFF1B;</li>
<li>&#x901F;&#x5EA6;&#x5FEB;&#x3001;&#x6027;&#x80FD;&#x9AD8;&#x3001;&#x53EF;&#x4EE5;&#x5B9E;&#x73B0;&#x590D;&#x6742;&#x52A8;&#x753B;&#x53CA;&#x7ED8;&#x5236;&#xFF0C;&#x6574;&#x4F53;&#x7528;&#x6237;&#x4F53;&#x9A8C;&#x597D;&#xFF1B;</li>
</ul>
<p>&#x4E3B;&#x8981;&#x7F3A;&#x70B9;&#xFF1A;</p>
<ul>
<li>&#x5E73;&#x53F0;&#x7279;&#x5B9A;&#xFF0C;&#x5F00;&#x53D1;&#x6210;&#x672C;&#x9AD8;&#xFF1B;&#x4E0D;&#x540C;&#x5E73;&#x53F0;&#x5FC5;&#x987B;&#x7EF4;&#x62A4;&#x4E0D;&#x540C;&#x4EE3;&#x7801;&#xFF0C;&#x4EBA;&#x529B;&#x6210;&#x672C;&#x968F;&#x4E4B;&#x53D8;&#x5927;&#xFF1B;</li>
<li>&#x5185;&#x5BB9;&#x56FA;&#x5B9A;&#xFF0C;&#x52A8;&#x6001;&#x5316;&#x5F31;&#xFF0C;&#x5927;&#x591A;&#x6570;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x6709;&#x65B0;&#x529F;&#x80FD;&#x66F4;&#x65B0;&#x65F6;&#x53EA;&#x80FD;&#x53D1;&#x7248;&#xFF1B;</li>
</ul>
<p>&#x5728;&#x79FB;&#x52A8;&#x4E92;&#x8054;&#x7F51;&#x53D1;&#x5C55;&#x521D;&#x671F;&#xFF0C;&#x4E1A;&#x52A1;&#x573A;&#x666F;&#x5E76;&#x4E0D;&#x590D;&#x6742;&#xFF0C;&#x539F;&#x751F;&#x5F00;&#x53D1;&#x8FD8;&#x53EF;&#x4EE5;&#x5E94;&#x5BF9;&#x4EA7;&#x54C1;&#x9700;&#x6C42;&#x8FED;&#x4EE3;&#x3002; &#x4F46;&#x8FD1;&#x51E0;&#x5E74;&#xFF0C;&#x968F;&#x7740;&#x7269;&#x8054;&#x7F51;&#x65F6;&#x4EE3;&#x5230;&#x6765;&#x3001;&#x79FB;&#x52A8;&#x4E92;&#x8054;&#x7F51;&#x9AD8;&#x6B4C;&#x731B;&#x8FDB;&#xFF0C;&#x65E5;&#x65B0;&#x6708;&#x5F02;&#xFF0C;&#x5728;&#x5F88;&#x591A;&#x4E1A;&#x52A1;&#x573A;&#x666F;&#x4E2D;&#xFF0C;&#x4F20;&#x7EDF;&#x7684;&#x7EAF;&#x539F;&#x751F;&#x5F00;&#x53D1;&#x5DF2;&#x7ECF;&#x4E0D;&#x80FD;&#x6EE1;&#x8DB3;&#x65E5;&#x76CA;&#x589E;&#x957F;&#x7684;&#x4E1A;&#x52A1;&#x9700;&#x6C42;&#x3002;&#x4E3B;&#x8981;&#x8868;&#x73B0;&#x5728;&#xFF1A;</p>
<ul>
<li>&#x52A8;&#x6001;&#x5316;&#x5185;&#x5BB9;&#x9700;&#x6C42;&#x589E;&#x5927;&#xFF1B;&#x5F53;&#x9700;&#x6C42;&#x53D1;&#x751F;&#x53D8;&#x5316;&#x65F6;&#xFF0C;&#x7EAF;&#x539F;&#x751F;&#x5E94;&#x7528;&#x9700;&#x8981;&#x901A;&#x8FC7;&#x7248;&#x672C;&#x5347;&#x7EA7;&#x6765;&#x66F4;&#x65B0;&#x5185;&#x5BB9;&#xFF0C;&#x4F46;&#x5E94;&#x7528;&#x4E0A;&#x67B6;&#x3001;&#x5BA1;&#x6838;&#x662F;&#x9700;&#x8981;&#x5468;&#x671F;&#x7684;&#xFF0C;&#x8FD9;&#x5BF9;&#x9AD8;&#x901F;&#x53D8;&#x5316;&#x7684;&#x4E92;&#x8054;&#x7F51;&#x65F6;&#x4EE3;&#x6765;&#x8BF4;&#x662F;&#x5F88;&#x96BE;&#x63A5;&#x53D7;&#x7684;&#xFF0C;&#x6240;&#x4EE5;&#xFF0C;&#x5BF9;&#x5E94;&#x7528;&#x52A8;&#x6001;&#x5316;(&#x4E0D;&#x53D1;&#x7248;&#x4E5F;&#x53EF;&#x4EE5;&#x66F4;&#x65B0;&#x5E94;&#x7528;&#x5185;&#x5BB9;)&#x7684;&#x9700;&#x6C42;&#x5C31;&#x53D8;&#x7684;&#x8FEB;&#x5728;&#x7709;&#x776B;&#x3002;</li>
<li>&#x4E1A;&#x52A1;&#x9700;&#x6C42;&#x53D8;&#x5316;&#x5FEB;&#xFF0C;&#x5F00;&#x53D1;&#x6210;&#x672C;&#x53D8;&#x5927;&#xFF1B;&#x7531;&#x4E8E;&#x539F;&#x751F;&#x5F00;&#x53D1;&#x4E00;&#x822C;&#x90FD;&#x8981;&#x7EF4;&#x62A4;Android&#x3001;iOS&#x4E24;&#x4E2A;&#x5F00;&#x53D1;&#x56E2;&#x961F;&#xFF0C;&#x7248;&#x672C;&#x8FED;&#x4EE3;&#x65F6;&#xFF0C;&#x65E0;&#x8BBA;&#x4EBA;&#x529B;&#x6210;&#x672C;&#xFF0C;&#x8FD8;&#x662F;&#x6D4B;&#x8BD5;&#x6210;&#x672C;&#x90FD;&#x4F1A;&#x53D8;&#x5927;&#x3002;</li>
</ul>
<p>&#x603B;&#x7ED3;&#x4E00;&#x4E0B;&#xFF0C;&#x7EAF;&#x539F;&#x751F;&#x5F00;&#x53D1;&#x4E3B;&#x8981;&#x9762;&#x4E34;&#x52A8;&#x6001;&#x5316;&#x548C;&#x5F00;&#x53D1;&#x6210;&#x672C;&#x4E24;&#x4E2A;&#x95EE;&#x9898;&#xFF0C;&#x800C;&#x9488;&#x5BF9;&#x8FD9;&#x4E24;&#x4E2A;&#x95EE;&#x9898;&#xFF0C;&#x8BDE;&#x751F;&#x4E86;&#x4E00;&#x4E9B;&#x8DE8;&#x5E73;&#x53F0;&#x7684;&#x52A8;&#x6001;&#x5316;&#x6846;&#x67B6;&#x3002;</p>
<h3 id="&#x8DE8;&#x5E73;&#x53F0;&#x6280;&#x672F;&#x7B80;&#x4ECB;"><a name="&#x8DE8;&#x5E73;&#x53F0;&#x6280;&#x672F;&#x7B80;&#x4ECB;" class="anchor-navigation-ex-anchor" href="#&#x8DE8;&#x5E73;&#x53F0;&#x6280;&#x672F;&#x7B80;&#x4ECB;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x8DE8;&#x5E73;&#x53F0;&#x6280;&#x672F;&#x7B80;&#x4ECB;</h3>
<p>&#x9488;&#x5BF9;&#x539F;&#x751F;&#x5F00;&#x53D1;&#x9762;&#x4E34;&#x95EE;&#x9898;&#xFF0C;&#x4EBA;&#x4EEC;&#x4E00;&#x76F4;&#x90FD;&#x5728;&#x52AA;&#x529B;&#x5BFB;&#x627E;&#x597D;&#x7684;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#xFF0C;&#x800C;&#x65F6;&#x81F3;&#x4ECA;&#x65E5;&#xFF0C;&#x5DF2;&#x7ECF;&#x6709;&#x5F88;&#x591A;&#x8DE8;&#x5E73;&#x53F0;&#x6846;&#x67B6;(&#x6CE8;&#x610F;&#xFF0C;&#x672C;&#x4E66;&#x4E2D;&#x6240;&#x6307;&#x7684;&#x201C;&#x8DE8;&#x5E73;&#x53F0;&#x201D;&#x82E5;&#x65E0;&#x7279;&#x6B8A;&#x8BF4;&#x660E;&#xFF0C;&#x5373;&#x7279;&#x6307;Android&#x548C;iOS&#x4E24;&#x4E2A;&#x5E73;&#x53F0;)&#xFF0C;&#x6839;&#x636E;&#x5176;&#x539F;&#x7406;&#xFF0C;&#x4E3B;&#x8981;&#x5206;&#x4E3A;&#x4E09;&#x7C7B;&#xFF1A;</p>
<ul>
<li>H5+&#x539F;&#x751F;&#xFF08;Cordova&#x3001;Ionic&#x3001;&#x5FAE;&#x4FE1;&#x5C0F;&#x7A0B;&#x5E8F;&#xFF09;</li>
<li>JavaScript&#x5F00;&#x53D1;+&#x539F;&#x751F;&#x6E32;&#x67D3; &#xFF08;React Native&#x3001;Weex&#x3001;&#x5FEB;&#x5E94;&#x7528;&#xFF09;</li>
<li>&#x81EA;&#x7ED8;UI+&#x539F;&#x751F;(QT for mobile&#x3001;Flutter)</li>
</ul>
<h4 id="h5&#x539F;&#x751F;&#x6DF7;&#x5408;&#x5F00;&#x53D1;"><a name="h5&#x539F;&#x751F;&#x6DF7;&#x5408;&#x5F00;&#x53D1;" class="anchor-navigation-ex-anchor" href="#h5&#x539F;&#x751F;&#x6DF7;&#x5408;&#x5F00;&#x53D1;"><i class="fa fa-link" aria-hidden="true"></i></a>H5+&#x539F;&#x751F;&#x6DF7;&#x5408;&#x5F00;&#x53D1;</h4>
<p>&#x8FD9;&#x7C7B;&#x6846;&#x67B6;&#x4E3B;&#x8981;&#x539F;&#x7406;&#x5C31;&#x662F;&#x5C06;APP&#x7684;&#x4E00;&#x90E8;&#x5206;&#x9700;&#x8981;&#x52A8;&#x6001;&#x53D8;&#x52A8;&#x7684;&#x5185;&#x5BB9;&#x901A;&#x8FC7;H5&#x6765;&#x5B9E;&#x73B0;&#xFF0C;&#x901A;&#x8FC7;&#x539F;&#x751F;&#x7684;&#x7F51;&#x9875;&#x52A0;&#x8F7D;&#x63A7;&#x4EF6;WebView (Android)&#x6216;WKWebView&#xFF08;iOS&#xFF09;&#x6765;&#x52A0;&#x8F7D;&#xFF08;&#x4EE5;&#x540E;&#x82E5;&#x65E0;&#x7279;&#x6B8A;&#x8BF4;&#x660E;&#xFF0C;&#x6211;&#x4EEC;&#x7528;WebView&#x6765;&#x7EDF;&#x4E00;&#x6307;&#x4EE3;android&#x548C;iOS&#x4E2D;&#x7684;&#x7F51;&#x9875;&#x52A0;&#x8F7D;&#x63A7;&#x4EF6;&#xFF09;&#x3002;&#x8FD9;&#x6837;&#x4EE5;&#x6765;&#xFF0C;H5&#x90E8;&#x5206;&#x662F;&#x53EF;&#x4EE5;&#x968F;&#x65F6;&#x6539;&#x53D8;&#x800C;&#x4E0D;&#x7528;&#x53D1;&#x7248;&#xFF0C;&#x52A8;&#x6001;&#x5316;&#x9700;&#x6C42;&#x80FD;&#x6EE1;&#x8DB3;&#xFF1B;&#x540C;&#x65F6;&#xFF0C;&#x7531;&#x4E8E;h5&#x4EE3;&#x7801;&#x53EA;&#x9700;&#x8981;&#x4E00;&#x6B21;&#x5F00;&#x53D1;&#xFF0C;&#x5C31;&#x80FD;&#x540C;&#x65F6;&#x5728;Android&#x548C;iOS&#x4E24;&#x4E2A;&#x5E73;&#x53F0;&#x8FD0;&#x884C;&#xFF0C;&#x8FD9;&#x4E5F;&#x53EF;&#x4EE5;&#x51CF;&#x5C0F;&#x5F00;&#x53D1;&#x6210;&#x672C;&#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x8BF4;&#xFF0C;H5&#x90E8;&#x5206;&#x529F;&#x80FD;&#x8D8A;&#x591A;&#xFF0C;&#x5F00;&#x53D1;&#x6210;&#x672C;&#x5C31;&#x8D8A;&#x5C0F;&#x3002;&#x6211;&#x4EEC;&#x79F0;&#x8FD9;&#x79CD;h5+&#x539F;&#x751F;&#x7684;&#x5F00;&#x53D1;&#x6A21;&#x5F0F;&#x4E3A;&#x6DF7;&#x5408;&#x5F00;&#x53D1; &#xFF0C;&#x91C7;&#x7528;&#x6DF7;&#x5408;&#x6A21;&#x5F0F;&#x5F00;&#x53D1;&#x7684;APP&#x6211;&#x4EEC;&#x79F0;&#x4E4B;&#x4E3A;&#x6DF7;&#x5408;&#x5E94;&#x7528;&#x6216;Hybrid APP &#xFF0C;&#x5982;&#x679C;&#x4E00;&#x4E2A;&#x5E94;&#x7528;&#x7684;&#x5927;&#x591A;&#x6570;&#x529F;&#x80FD;&#x90FD;&#x662F;H5&#x5B9E;&#x73B0;&#x7684;&#x8BDD;&#xFF0C;&#x6211;&#x4EEC;&#x79F0;&#x5176;&#x4E3A;Web APP &#x3002;</p>
<p>&#x76EE;&#x524D;&#x6DF7;&#x5408;&#x5F00;&#x53D1;&#x6846;&#x67B6;&#x7684;&#x5178;&#x578B;&#x4EE3;&#x8868;&#x6709;&#xFF1A;Cordova&#x3001;Ionic &#x548C;&#x5FAE;&#x4FE1;&#x5C0F;&#x7A0B;&#x5E8F;&#xFF0C;&#x503C;&#x5F97;&#x4E00;&#x63D0;&#x7684;&#x662F;&#x5FAE;&#x4FE1;&#x5C0F;&#x7A0B;&#x5E8F;&#x76EE;&#x524D;&#x662F;&#x5728;webview&#x4E2D;&#x6E32;&#x67D3;&#x7684;&#xFF0C;&#x5E76;&#x975E;&#x539F;&#x751F;&#x6E32;&#x67D3;&#xFF0C;&#x4F46;&#x5C06;&#x6765;&#x6709;&#x53EF;&#x80FD;&#x4F1A;&#x91C7;&#x7528;&#x539F;&#x751F;&#x6E32;&#x67D3;&#x3002;</p>
<p>&#x539F;&#x7406;</p>
<p>&#x5982;&#x4E4B;&#x524D;&#x6240;&#x8FF0;&#xFF0C;&#x539F;&#x751F;&#x5F00;&#x53D1;&#x53EF;&#x4EE5;&#x8BBF;&#x95EE;&#x5E73;&#x53F0;&#x6240;&#x6709;&#x529F;&#x80FD;&#xFF0C;&#x800C;&#x6DF7;&#x5408;&#x5F00;&#x53D1;&#x4E2D;&#xFF0C;H5&#x4EE3;&#x7801;&#x662F;&#x8FD0;&#x884C;&#x5728;WebView&#x4E2D;&#xFF0C;&#x800C;WebView&#x5B9E;&#x8D28;&#x4E0A;&#x5C31;&#x662F;&#x4E00;&#x4E2A;&#x6D4F;&#x89C8;&#x5668;&#x5185;&#x6838;&#xFF0C;&#x5176;JavaScript&#x4F9D;&#x7136;&#x8FD0;&#x884C;&#x5728;&#x4E00;&#x4E2A;&#x6743;&#x9650;&#x53D7;&#x9650;&#x7684;&#x6C99;&#x7BB1;&#x4E2D;&#xFF0C;&#x6240;&#x4EE5;&#x5BF9;&#x4E8E;&#x5927;&#x591A;&#x6570;&#x7CFB;&#x7EDF;&#x80FD;&#x529B;&#x90FD;&#x6CA1;&#x6709;&#x8BBF;&#x95EE;&#x6743;&#x9650;&#xFF0C;&#x5982;&#x65E0;&#x6CD5;&#x8BBF;&#x95EE;&#x6587;&#x4EF6;&#x7CFB;&#x7EDF;&#x3001;&#x4E0D;&#x80FD;&#x4F7F;&#x7528;&#x84DD;&#x7259;&#x7B49;&#x3002;&#x6240;&#x4EE5;&#xFF0C;&#x5BF9;&#x4E8E;H5&#x4E0D;&#x80FD;&#x5B9E;&#x73B0;&#x7684;&#x529F;&#x80FD;&#xFF0C;&#x90FD;&#x9700;&#x8981;&#x539F;&#x751F;&#x53BB;&#x505A;&#x3002;&#x800C;&#x6DF7;&#x5408;&#x6846;&#x67B6;&#x4E00;&#x822C;&#x90FD;&#x4F1A;&#x5728;&#x539F;&#x751F;&#x4EE3;&#x7801;&#x4E2D;&#x9884;&#x5148;&#x5B9E;&#x73B0;&#x4E00;&#x4E9B;&#x8BBF;&#x95EE;&#x7CFB;&#x7EDF;&#x80FD;&#x529B;&#x7684;API&#xFF0C; &#x7136;&#x540E;&#x66B4;&#x9732;&#x7ED9;WebView&#x4EE5;&#x4F9B;JavaScript&#x8C03;&#x7528;&#xFF0C;&#x8FD9;&#x6837;&#x4E00;&#x6765;&#xFF0C;WebView&#x5C31;&#x6210;&#x4E3A;&#x4E86;JavaScript&#x4E0E;&#x539F;&#x751F;API&#x4E4B;&#x95F4;&#x901A;&#x4FE1;&#x7684;&#x6865;&#x6881;&#xFF0C;&#x4E3B;&#x8981;&#x8D1F;&#x8D23;JavaScript&#x4E0E;&#x539F;&#x751F;&#x4E4B;&#x95F4;&#x4F20;&#x9012;&#x8C03;&#x7528;&#x6D88;&#x606F;&#xFF0C;&#x800C;&#x6D88;&#x606F;&#x7684;&#x4F20;&#x9012;&#x5FC5;&#x987B;&#x9075;&#x5B88;&#x4E00;&#x4E2A;&#x6807;&#x51C6;&#x7684;&#x534F;&#x8BAE;&#xFF0C;&#x5B83;&#x89C4;&#x5B9A;&#x4E86;&#x6D88;&#x606F;&#x7684;&#x683C;&#x5F0F;&#x4E0E;&#x542B;&#x4E49;&#xFF0C;&#x6211;&#x4EEC;&#x628A;&#x4F9D;&#x8D56;&#x4E8E;WebView&#x7684;&#x7528;&#x4E8E;&#x5728;JavaScript&#x4E0E;&#x539F;&#x751F;&#x4E4B;&#x95F4;&#x901A;&#x4FE1;&#x5E76;&#x5B9E;&#x73B0;&#x4E86;&#x67D0;&#x79CD;&#x6D88;&#x606F;&#x4F20;&#x8F93;&#x534F;&#x8BAE;&#x7684;&#x5DE5;&#x5177;&#x79F0;&#x4E4B;&#x4E3A;WebView JavaScript Bridge, &#x7B80;&#x79F0; JsBridge&#xFF0C;&#x5B83;&#x4E5F;&#x662F;&#x6DF7;&#x5408;&#x5F00;&#x53D1;&#x6846;&#x67B6;&#x7684;&#x6838;&#x5FC3;&#x3002;</p>
<blockquote>
<p>&#x793A;&#x4F8B;&#xFF1A;JavaScript&#x8C03;&#x7528;&#x539F;&#x751F;API&#x83B7;&#x53D6;&#x624B;&#x673A;&#x578B;&#x53F7;</p>
</blockquote>
<p>&#x6211;&#x4EEC;&#x4EE5;Android&#x4E3A;&#x4F8B;&#xFF0C;&#x5B9E;&#x73B0;&#x4E00;&#x4E2A;&#x83B7;&#x53D6;&#x624B;&#x673A;&#x578B;&#x53F7;&#x7684;&#x539F;&#x751F;API&#x4F9B;JavaScript&#x8C03;&#x7528;&#x3002;&#x5728;&#x8FD9;&#x4E2A;&#x793A;&#x4F8B;&#x4E2D;&#x5C06;&#x5C55;&#x793A;JavaScript&#x8C03;&#x7528;&#x539F;&#x751F;API&#x7684;&#x6D41;&#x7A0B;&#xFF0C;&#x53EF;&#x4EE5;&#x76F4;&#x89C2;&#x7684;&#x611F;&#x53D7;&#x4E00;&#x4E0B;&#x8C03;&#x7528;&#x6D41;&#x7A0B;&#x3002;&#x6211;&#x4EEC;&#x9009;&#x7528;&#x5728;Github&#x4E0A;&#x5F00;&#x6E90;&#x7684;dsBridge&#x4F5C;&#x4E3A;JsBridge&#x6765;&#x8FDB;&#x884C;&#x901A;&#x4FE1;&#x3002;dsBridge&#x662F;&#x4E00;&#x4E2A;&#x652F;&#x6301;&#x540C;&#x6B65;&#x8C03;&#x7528;&#x7684;&#x8DE8;&#x5E73;&#x53F0;&#x7684;JsBridge&#xFF0C;&#x6B64;&#x793A;&#x4F8B;&#x4E2D;&#x53EA;&#x4F7F;&#x7528;&#x5176;&#x540C;&#x6B65;&#x8C03;&#x7528;&#x529F;&#x80FD;&#x3002;</p>
<ul>
<li><p>&#x9996;&#x5148;&#x5728;&#x539F;&#x751F;&#x4E2D;&#x5B9E;&#x73B0;&#x83B7;&#x53D6;&#x624B;&#x673A;&#x578B;&#x53F7;&#x7684;API getPhoneModel</p>
<pre class="language-"><code class="lang-java"><span class="token keyword">class</span> JSAPI <span class="token punctuation">{</span>

<span class="token annotation punctuation">@JavascriptInterface</span>
<span class="token keyword">public</span> <span class="token class-name">Object</span> <span class="token function">getPhoneModel</span><span class="token punctuation">(</span><span class="token class-name">Object</span> msg<span class="token punctuation">)</span> <span class="token punctuation">{</span>

 <span class="token keyword">return</span> <span class="token class-name">Build</span><span class="token punctuation">.</span>MODEL<span class="token punctuation">;</span>

<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</li>
<li>&#x5C06;&#x539F;&#x751F;API&#x901A;&#x8FC7;WebView&#x6CE8;&#x518C;&#x5230;JsBridge&#x4E2D;<pre class="language-"><code class="lang-java"><span class="token keyword">import</span> <span class="token namespace">wendu<span class="token punctuation">.</span>dsbridge</span><span class="token punctuation">.</span><span class="token class-name">DWebView</span>
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
<span class="token comment">//DWebView&#x7EE7;&#x627F;&#x81EA;WebView&#xFF0C;&#x7531;dsBridge&#x63D0;&#x4F9B;  </span>
<span class="token class-name">DWebView</span> dwebView <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token class-name">DWebView</span><span class="token punctuation">)</span> <span class="token function">findViewById</span><span class="token punctuation">(</span><span class="token class-name">R</span><span class="token punctuation">.</span>id<span class="token punctuation">.</span>dwebview<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//&#x6CE8;&#x518C;&#x539F;&#x751F;API&#x5230;JsBridge</span>
dwebView<span class="token punctuation">.</span><span class="token function">addJavascriptObject</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">JsAPI</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</li>
<li>&#x5728;JavaScript&#x4E2D;&#x8C03;&#x7528;&#x539F;&#x751F;API<pre class="language-"><code class="lang-javascript"><span class="token keyword">var</span> dsBridge <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;dsbridge&quot;</span><span class="token punctuation">)</span>
<span class="token comment">//&#x76F4;&#x63A5;&#x8C03;&#x7528;&#x539F;&#x751F;API `getPhoneModel`</span>
<span class="token keyword">var</span> model <span class="token operator">=</span> <span class="token function">dsBridge</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token string">&quot;getPhoneModel&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//&#x6253;&#x5370;&#x673A;&#x578B;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>model<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
&#x4E0A;&#x9762;&#x793A;&#x4F8B;&#x6F14;&#x793A;&#x4E86;JavaScript&#x8C03;&#x7528;&#x539F;&#x751F;API&#x7684;&#x8FC7;&#x7A0B;&#xFF0C;&#x540C;&#x6837;&#x7684;&#xFF0C;&#x4E00;&#x822C;&#x6765;&#x8BF4;&#x4F18;&#x79C0;&#x7684;JsBridge&#x4E5F;&#x652F;&#x6301;&#x539F;&#x751F;&#x8C03;&#x7528;JavaScript&#xFF0C;dsBridge&#x4E5F;&#x662F;&#x652F;&#x6301;&#x7684;&#xFF0C;&#x5982;&#x679C;&#x60A8;&#x611F;&#x5174;&#x8DA3;&#xFF0C;&#x53EF;&#x4EE5;&#x53BB;github dsBridge&#x9879;&#x76EE;&#x4E3B;&#x9875;&#x67E5;&#x770B;&#x3002;</li>
</ul>
<p>&#x73B0;&#x5728;&#xFF0C;&#x6211;&#x4EEC;&#x56DE;&#x5934;&#x6765;&#x770B;&#x4E00;&#x4E0B;&#xFF0C;&#x6DF7;&#x5408;&#x5E94;&#x7528;&#x65E0;&#x975E;&#x5C31;&#x662F;&#x5728;&#x7B2C;&#x4E00;&#x6B65;&#x4E2D;&#x9884;&#x5148;&#x5B9E;&#x73B0;&#x4E00;&#x7CFB;&#x5217;API&#x4F9B;JavaScript&#x8C03;&#x7528;&#xFF0C;&#x8BA9;JavaScript&#x6709;&#x8BBF;&#x95EE;&#x7CFB;&#x7EDF;&#x7684;&#x80FD;&#x529B;&#xFF0C;&#x770B;&#x5230;&#x8FD9;&#x91CC;&#xFF0C;&#x6211;&#x76F8;&#x4FE1;&#x4F60;&#x4E5F;&#x53EF;&#x4EE5;&#x81EA;&#x5DF1;&#x5B9E;&#x73B0;&#x4E00;&#x4E2A;&#x6DF7;&#x5408;&#x5F00;&#x53D1;&#x6846;&#x67B6;&#x4E86;&#x3002;</p>
<p>&#x603B;&#x7ED3;</p>
<p>&#x6DF7;&#x5408;&#x5E94;&#x7528;&#x7684;&#x4F18;&#x70B9;&#x662F;&#x52A8;&#x6001;&#x5185;&#x5BB9;&#x662F;H5&#xFF0C;web&#x6280;&#x672F;&#x6808;&#xFF0C;&#x793E;&#x533A;&#x53CA;&#x8D44;&#x6E90;&#x4E30;&#x5BCC;&#xFF0C;&#x7F3A;&#x70B9;&#x662F;&#x6027;&#x80FD;&#x4E0D;&#x597D;&#xFF0C;&#x5BF9;&#x4E8E;&#x590D;&#x6742;&#x7528;&#x6237;&#x754C;&#x9762;&#x6216;&#x52A8;&#x753B;&#xFF0C;WebView&#x4E0D;&#x582A;&#x91CD;&#x4EFB;&#x3002;</p>
<h4 id="javascript&#x5F00;&#x53D1;&#x539F;&#x751F;&#x6E32;&#x67D3;"><a name="javascript&#x5F00;&#x53D1;&#x539F;&#x751F;&#x6E32;&#x67D3;" class="anchor-navigation-ex-anchor" href="#javascript&#x5F00;&#x53D1;&#x539F;&#x751F;&#x6E32;&#x67D3;"><i class="fa fa-link" aria-hidden="true"></i></a>JavaScript&#x5F00;&#x53D1;+&#x539F;&#x751F;&#x6E32;&#x67D3;</h4>
<p>&#x4E3B;&#x8981;&#x4ECB;&#x7ECD;&#x4E00;&#x4E0B; JavaScript&#x5F00;&#x53D1;+&#x539F;&#x751F;&#x6E32;&#x67D3;&#x7684;&#x8DE8;&#x5E73;&#x53F0;&#x6846;&#x67B6;&#x539F;&#x7406;&#x3002;</p>
<p>React Native (&#x7B80;&#x79F0;RN)&#x662F;Facebook&#x4E8E;2015&#x5E74;4&#x6708;&#x5F00;&#x6E90;&#x7684;&#x8DE8;&#x5E73;&#x53F0;&#x79FB;&#x52A8;&#x5E94;&#x7528;&#x5F00;&#x53D1;&#x6846;&#x67B6;&#xFF0C;&#x662F;Facebook&#x65E9;&#x5148;&#x5F00;&#x6E90;&#x7684;JS&#x6846;&#x67B6; React &#x5728;&#x539F;&#x751F;&#x79FB;&#x52A8;&#x5E94;&#x7528;&#x5E73;&#x53F0;&#x7684;&#x884D;&#x751F;&#x4EA7;&#x7269;&#xFF0C;&#x76EE;&#x524D;&#x652F;&#x6301;iOS&#x548C;Android&#x4E24;&#x4E2A;&#x5E73;&#x53F0;&#x3002;RN&#x4F7F;&#x7528;Javascript&#x8BED;&#x8A00;&#xFF0C;&#x7C7B;&#x4F3C;&#x4E8E;HTML&#x7684;JSX&#xFF0C;&#x4EE5;&#x53CA;CSS&#x6765;&#x5F00;&#x53D1;&#x79FB;&#x52A8;&#x5E94;&#x7528;&#xFF0C;&#x56E0;&#x6B64;&#x719F;&#x6089;Web&#x524D;&#x7AEF;&#x5F00;&#x53D1;&#x7684;&#x6280;&#x672F;&#x4EBA;&#x5458;&#x53EA;&#x9700;&#x5F88;&#x5C11;&#x7684;&#x5B66;&#x4E60;&#x5C31;&#x53EF;&#x4EE5;&#x8FDB;&#x5165;&#x79FB;&#x52A8;&#x5E94;&#x7528;&#x5F00;&#x53D1;&#x9886;&#x57DF;&#x3002;</p>
<p>&#x7531;&#x4E8E;RN&#x548C;React&#x539F;&#x7406;&#x76F8;&#x901A;&#xFF0C;&#x5E76;&#x4E14;Flutter&#x4E5F;&#x662F;&#x53D7;React&#x542F;&#x53D1;&#xFF0C;&#x5F88;&#x591A;&#x601D;&#x60F3;&#x4E5F;&#x90FD;&#x662F;&#x76F8;&#x901A;&#x7684;&#xFF0C;&#x4E07;&#x4E08;&#x9AD8;&#x697C;&#x5E73;&#x5730;&#x8D77;&#xFF0C;&#x6211;&#x4EEC;&#x6709;&#x5FC5;&#x8981;&#x6DF1;&#x5165;&#x4E86;&#x89E3;&#x4E00;&#x4E0B;React&#x539F;&#x7406;&#x3002;React&#x662F;&#x4E00;&#x4E2A;&#x54CD;&#x5E94;&#x5F0F;&#x7684;Web&#x6846;&#x67B6;&#xFF0C;&#x6211;&#x4EEC;&#x5148;&#x4E86;&#x89E3;&#x4E00;&#x4E0B;&#x4E24;&#x4E2A;&#x91CD;&#x8981;&#x7684;&#x6982;&#x5FF5;&#xFF1A;DOM&#x6811;&#x4E0E;&#x54CD;&#x5E94;&#x5F0F;&#x7F16;&#x7A0B;&#x3002;</p>
<h4 id="dom&#x6811;&#x4E0E;&#x63A7;&#x4EF6;&#x6811;"><a name="dom&#x6811;&#x4E0E;&#x63A7;&#x4EF6;&#x6811;" class="anchor-navigation-ex-anchor" href="#dom&#x6811;&#x4E0E;&#x63A7;&#x4EF6;&#x6811;"><i class="fa fa-link" aria-hidden="true"></i></a>DOM&#x6811;&#x4E0E;&#x63A7;&#x4EF6;&#x6811;</h4>
<p>&#x6587;&#x6863;&#x5BF9;&#x8C61;&#x6A21;&#x578B;&#xFF08;Document Object Model&#xFF0C;&#x7B80;&#x79F0;DOM&#xFF09;&#xFF0C;&#x662F;W3C&#x7EC4;&#x7EC7;&#x63A8;&#x8350;&#x7684;&#x5904;&#x7406;&#x53EF;&#x6269;&#x5C55;&#x6807;&#x5FD7;&#x8BED;&#x8A00;&#x7684;&#x6807;&#x51C6;&#x7F16;&#x7A0B;&#x63A5;&#x53E3;&#xFF0C;&#x4E00;&#x79CD;&#x72EC;&#x7ACB;&#x4E8E;&#x5E73;&#x53F0;&#x548C;&#x8BED;&#x8A00;&#x7684;&#x65B9;&#x5F0F;&#x8BBF;&#x95EE;&#x548C;&#x4FEE;&#x6539;&#x4E00;&#x4E2A;&#x6587;&#x6863;&#x7684;&#x5185;&#x5BB9;&#x548C;&#x7ED3;&#x6784;&#x3002;&#x6362;&#x53E5;&#x8BDD;&#x8BF4;&#xFF0C;&#x8FD9;&#x662F;&#x8868;&#x793A;&#x548C;&#x5904;&#x7406;&#x4E00;&#x4E2A;HTML&#x6216;XML&#x6587;&#x6863;&#x7684;&#x6807;&#x51C6;&#x63A5;&#x53E3;&#x3002;&#x7B80;&#x5355;&#x6765;&#x8BF4;&#xFF0C;DOM&#x5C31;&#x662F;&#x6587;&#x6863;&#x6811;&#xFF0C;&#x4E0E;&#x7528;&#x6237;&#x754C;&#x9762;&#x63A7;&#x4EF6;&#x6811;&#x5BF9;&#x5E94;&#xFF0C;&#x5728;&#x524D;&#x7AEF;&#x5F00;&#x53D1;&#x4E2D;&#x901A;&#x5E38;&#x6307;HTML&#x5BF9;&#x5E94;&#x7684;&#x6E32;&#x67D3;&#x6811;&#xFF0C;&#x4F46;&#x5E7F;&#x4E49;&#x7684;DOM&#x4E5F;&#x53EF;&#x4EE5;&#x6307;Android&#x4E2D;&#x7684;XML&#x5E03;&#x5C40;&#x6587;&#x4EF6;&#x5BF9;&#x5E94;&#x7684;&#x63A7;&#x4EF6;&#x6811;&#xFF0C;&#x800C;&#x672F;&#x8BED;DOM&#x64CD;&#x4F5C;&#x5C31;&#x662F;&#x6307;&#x76F4;&#x63A5;&#x6765;&#x64CD;&#x4F5C;&#x6E32;&#x67D3;&#x6811;&#xFF08;&#x6216;&#x63A7;&#x4EF6;&#x6811;&#xFF09;&#xFF0C; &#x56E0;&#x6B64;&#xFF0C;&#x53EF;&#x4EE5;&#x770B;&#x5230;&#x5176;&#x5B9E;DOM&#x6811;&#x548C;&#x63A7;&#x4EF6;&#x6811;&#x662F;&#x7B49;&#x4EF7;&#x7684;&#x6982;&#x5FF5;&#xFF0C;&#x53EA;&#x4E0D;&#x8FC7;&#x524D;&#x8005;&#x5E38;&#x7528;&#x4E8E;Web&#x5F00;&#x53D1;&#x4E2D;&#xFF0C;&#x800C;&#x540E;&#x8005;&#x5E38;&#x7528;&#x4E8E;&#x539F;&#x751F;&#x5F00;&#x53D1;&#x4E2D;&#x3002;</p>
<h4 id="&#x54CD;&#x5E94;&#x5F0F;&#x7F16;&#x7A0B;"><a name="&#x54CD;&#x5E94;&#x5F0F;&#x7F16;&#x7A0B;" class="anchor-navigation-ex-anchor" href="#&#x54CD;&#x5E94;&#x5F0F;&#x7F16;&#x7A0B;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x54CD;&#x5E94;&#x5F0F;&#x7F16;&#x7A0B;</h4>
<p>React&#x4E2D;&#x63D0;&#x51FA;&#x4E00;&#x4E2A;&#x91CD;&#x8981;&#x601D;&#x60F3;&#xFF1A;&#x72B6;&#x6001;&#x6539;&#x53D8;&#x5219;UI&#x968F;&#x4E4B;&#x81EA;&#x52A8;&#x6539;&#x53D8;&#xFF0C;&#x800C;React&#x6846;&#x67B6;&#x672C;&#x8EAB;&#x5C31;&#x662F;&#x54CD;&#x5E94;&#x7528;&#x6237;&#x72B6;&#x6001;&#x6539;&#x53D8;&#x7684;&#x4E8B;&#x4EF6;&#x800C;&#x6267;&#x884C;&#x91CD;&#x65B0;&#x6784;&#x5EFA;&#x7528;&#x6237;&#x754C;&#x9762;&#x7684;&#x5DE5;&#x4F5C;&#xFF0C;&#x8FD9;&#x5C31;&#x662F;&#x5178;&#x578B;&#x7684;&#x54CD;&#x5E94;&#x5F0F;&#x7F16;&#x7A0B;&#x8303;&#x5F0F;&#xFF0C;&#x4E0B;&#x9762;&#x6211;&#x4EEC;&#x603B;&#x7ED3;&#x4E00;&#x4E0B;React&#x4E2D;&#x54CD;&#x5E94;&#x5F0F;&#x539F;&#x7406;&#xFF1A;</p>
<ul>
<li>&#x5F00;&#x53D1;&#x8005;&#x53EA;&#x9700;&#x5173;&#x6CE8;&#x72B6;&#x6001;&#x8F6C;&#x79FB;&#xFF08;&#x6570;&#x636E;&#xFF09;&#xFF0C;&#x5F53;&#x72B6;&#x6001;&#x53D1;&#x751F;&#x53D8;&#x5316;&#xFF0C;React&#x6846;&#x67B6;&#x4F1A;&#x81EA;&#x52A8;&#x6839;&#x636E;&#x65B0;&#x7684;&#x72B6;&#x6001;&#x91CD;&#x65B0;&#x6784;&#x5EFA;UI&#x3002;</li>
<li>React&#x6846;&#x67B6;&#x5728;&#x63A5;&#x6536;&#x5230;&#x7528;&#x6237;&#x72B6;&#x6001;&#x6539;&#x53D8;&#x901A;&#x77E5;&#x540E;&#xFF0C;&#x4F1A;&#x6839;&#x636E;&#x5F53;&#x524D;&#x6E32;&#x67D3;&#x6811;&#xFF0C;&#x7ED3;&#x5408;&#x6700;&#x65B0;&#x7684;&#x72B6;&#x6001;&#x6539;&#x53D8;&#xFF0C;&#x901A;&#x8FC7;Diff&#x7B97;&#x6CD5;&#xFF0C;&#x8BA1;&#x7B97;&#x51FA;&#x6811;&#x4E2D;&#x53D8;&#x5316;&#x7684;&#x90E8;&#x5206;&#xFF0C;&#x7136;&#x540E;&#x53EA;&#x66F4;&#x65B0;&#x53D8;&#x5316;&#x7684;&#x90E8;&#x5206;&#xFF08;DOM&#x64CD;&#x4F5C;&#xFF09;&#xFF0C;&#x4ECE;&#x800C;&#x907F;&#x514D;&#x6574;&#x68F5;&#x6811;&#x91CD;&#x6784;&#xFF0C;&#x63D0;&#x9AD8;&#x6027;&#x80FD;&#x3002;</li>
</ul>
<p>&#x503C;&#x5F97;&#x6CE8;&#x610F;&#x7684;&#x662F;&#xFF0C;&#x5728;&#x7B2C;&#x4E8C;&#x6B65;&#x4E2D;&#xFF0C;&#x72B6;&#x6001;&#x53D8;&#x5316;&#x540E;React&#x6846;&#x67B6;&#x5E76;&#x4E0D;&#x4F1A;&#x7ACB;&#x5373;&#x53BB;&#x8BA1;&#x7B97;&#x5E76;&#x6E32;&#x67D3;DOM&#x6811;&#x7684;&#x53D8;&#x5316;&#x90E8;&#x5206;&#xFF0C;&#x76F8;&#x53CD;&#xFF0C;React&#x4F1A;&#x5728;DOM&#x7684;&#x57FA;&#x7840;&#x4E0A;&#x5EFA;&#x7ACB;&#x4E00;&#x4E2A;&#x62BD;&#x8C61;&#x5C42;&#xFF0C;&#x5373;&#x865A;&#x62DF;DOM&#x6811;&#xFF0C;&#x5BF9;&#x6570;&#x636E;&#x548C;&#x72B6;&#x6001;&#x6240;&#x505A;&#x7684;&#x4EFB;&#x4F55;&#x6539;&#x52A8;&#xFF0C;&#x90FD;&#x4F1A;&#x88AB;&#x81EA;&#x52A8;&#x4E14;&#x9AD8;&#x6548;&#x7684;&#x540C;&#x6B65;&#x5230;&#x865A;&#x62DF;DOM&#xFF0C;&#x6700;&#x540E;&#x518D;&#x6279;&#x91CF;&#x540C;&#x6B65;&#x5230;&#x771F;&#x5B9E;DOM&#x4E2D;&#xFF0C;&#x800C;&#x4E0D;&#x662F;&#x6BCF;&#x6B21;&#x6539;&#x53D8;&#x90FD;&#x53BB;&#x64CD;&#x4F5C;&#x4E00;&#x4E0B;DOM&#x3002;&#x4E3A;&#x4EC0;&#x4E48;&#x4E0D;&#x80FD;&#x6BCF;&#x6B21;&#x6539;&#x53D8;&#x90FD;&#x76F4;&#x63A5;&#x53BB;&#x64CD;&#x4F5C;DOM&#x6811;&#xFF1F;&#x8FD9;&#x662F;&#x56E0;&#x4E3A;&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x6BCF;&#x4E00;&#x6B21;DOM&#x64CD;&#x4F5C;&#x90FD;&#x6709;&#x53EF;&#x80FD;&#x5F15;&#x8D77;&#x6D4F;&#x89C8;&#x5668;&#x7684;&#x91CD;&#x7ED8;&#x6216;&#x56DE;&#x6D41;&#xFF1A;</p>
<ul>
<li>&#x5982;&#x679C;DOM&#x53EA;&#x662F;&#x5916;&#x89C2;&#x98CE;&#x683C;&#x53D1;&#x751F;&#x53D8;&#x5316;&#xFF0C;&#x5982;&#x989C;&#x8272;&#x53D8;&#x5316;&#xFF0C;&#x4F1A;&#x5BFC;&#x81F4;&#x6D4F;&#x89C8;&#x5668;&#x91CD;&#x7ED8;&#x754C;&#x9762;&#x3002;</li>
<li>&#x5982;&#x679C;DOM&#x6811;&#x7684;&#x7ED3;&#x6784;&#x53D1;&#x751F;&#x53D8;&#x5316;&#xFF0C;&#x5982;&#x5C3A;&#x5BF8;&#x3001;&#x5E03;&#x5C40;&#x3001;&#x8282;&#x70B9;&#x9690;&#x85CF;&#x7B49;&#x5BFC;&#x81F4;&#xFF0C;&#x6D4F;&#x89C8;&#x5668;&#x5C31;&#x9700;&#x8981;&#x56DE;&#x6D41;&#xFF08;&#x53CA;&#x91CD;&#x65B0;&#x6392;&#x7248;&#x5E03;&#x5C40;&#xFF09;&#x3002;</li>
</ul>
<p>&#x800C;&#x6D4F;&#x89C8;&#x5668;&#x7684;&#x91CD;&#x7ED8;&#x548C;&#x56DE;&#x6D41;&#x90FD;&#x662F;&#x6BD4;&#x8F83;&#x6602;&#x8D35;&#x7684;&#x64CD;&#x4F5C;&#xFF0C;&#x5982;&#x679C;&#x6BCF;&#x4E00;&#x6B21;&#x6539;&#x53D8;&#x90FD;&#x76F4;&#x63A5;&#x5BF9;DOM&#x8FDB;&#x884C;&#x64CD;&#x4F5C;&#xFF0C;&#x8FD9;&#x4F1A;&#x5E26;&#x6765;&#x6027;&#x80FD;&#x95EE;&#x9898;&#xFF0C;&#x800C;&#x6279;&#x91CF;&#x64CD;&#x4F5C;&#x53EA;&#x4F1A;&#x89E6;&#x53D1;&#x4E00;&#x6B21;DOM&#x66F4;&#x65B0;&#x3002;</p>
<h4 id="react-native"><a name="react-native" class="anchor-navigation-ex-anchor" href="#react-native"><i class="fa fa-link" aria-hidden="true"></i></a>React Native</h4>
<p>&#x4E0A;&#x6587;&#x5DF2;&#x7ECF;&#x63D0;&#x5230;React Native &#x662F;React &#x5728;&#x539F;&#x751F;&#x79FB;&#x52A8;&#x5E94;&#x7528;&#x5E73;&#x53F0;&#x7684;&#x884D;&#x751F;&#x4EA7;&#x7269;&#xFF0C;&#x90A3;&#x4E24;&#x8005;&#x4E3B;&#x8981;&#x7684;&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#x5462;&#xFF1F;&#x5176;&#x5B9E;&#xFF0C;&#x4E3B;&#x8981;&#x7684;&#x533A;&#x522B;&#x5728;&#x4E8E;&#x865A;&#x62DF;DOM&#x6620;&#x5C04;&#x7684;&#x5BF9;&#x8C61;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;React&#x4E2D;&#x865A;&#x62DF;DOM&#x6700;&#x7EC8;&#x4F1A;&#x6620;&#x5C04;&#x4E3A;&#x6D4F;&#x89C8;&#x5668;DOM&#x6811;&#xFF0C;&#x800C;RN&#x4E2D;&#x865A;&#x62DF;DOM&#x4F1A;&#x901A;&#x8FC7; JavaScriptCore &#x6620;&#x5C04;&#x4E3A;&#x539F;&#x751F;&#x63A7;&#x4EF6;&#x6811;&#x3002;</p>
<p>JavaScriptCore &#x662F;&#x4E00;&#x4E2A;JavaScript&#x89E3;&#x91CA;&#x5668;&#xFF0C;&#x5B83;&#x5728;React Native&#x4E2D;&#x4E3B;&#x8981;&#x6709;&#x4E24;&#x4E2A;&#x4F5C;&#x7528;&#xFF1A;</p>
<ul>
<li>&#x4E3A;JavaScript&#x63D0;&#x4F9B;&#x8FD0;&#x884C;&#x73AF;&#x5883;&#x3002;</li>
<li>&#x662F;JavaScript&#x4E0E;&#x539F;&#x751F;&#x5E94;&#x7528;&#x4E4B;&#x95F4;&#x901A;&#x4FE1;&#x7684;&#x6865;&#x6881;&#xFF0C;&#x4F5C;&#x7528;&#x548C;JsBridge&#x4E00;&#x6837;&#xFF0C;&#x4E8B;&#x5B9E;&#x4E0A;&#xFF0C;&#x5728;iOS&#x4E2D;&#xFF0C;&#x5F88;&#x591A;JsBridge&#x7684;&#x5B9E;&#x73B0;&#x90FD;&#x662F;&#x57FA;&#x4E8E; JavaScriptCore &#x3002;</li>
</ul>
<p>&#x800C;RN&#x4E2D;&#x5C06;&#x865A;&#x62DF;DOM&#x6620;&#x5C04;&#x4E3A;&#x539F;&#x751F;&#x63A7;&#x4EF6;&#x7684;&#x8FC7;&#x7A0B;&#x4E2D;&#x5206;&#x4E24;&#x6B65;&#xFF1A;</p>
<ul>
<li>&#x5E03;&#x5C40;&#x6D88;&#x606F;&#x4F20;&#x9012;&#xFF1B; &#x5C06;&#x865A;&#x62DF;DOM&#x5E03;&#x5C40;&#x4FE1;&#x606F;&#x4F20;&#x9012;&#x7ED9;&#x539F;&#x751F;&#xFF1B;</li>
<li>&#x539F;&#x751F;&#x6839;&#x636E;&#x5E03;&#x5C40;&#x4FE1;&#x606F;&#x901A;&#x8FC7;&#x5BF9;&#x5E94;&#x7684;&#x539F;&#x751F;&#x63A7;&#x4EF6;&#x6E32;&#x67D3;&#x63A7;&#x4EF6;&#x6811;&#xFF1B;</li>
</ul>
<p>&#x81F3;&#x6B64;&#xFF0C;React Native &#x4FBF;&#x5B9E;&#x73B0;&#x4E86;&#x8DE8;&#x5E73;&#x53F0;&#x3002; &#x76F8;&#x5BF9;&#x4E8E;&#x6DF7;&#x5408;&#x5E94;&#x7528;&#xFF0C;&#x7531;&#x4E8E;React Native&#x662F;&#x539F;&#x751F;&#x63A7;&#x4EF6;&#x6E32;&#x67D3;&#xFF0C;&#x6240;&#x4EE5;&#x6027;&#x80FD;&#x4F1A;&#x6BD4;&#x6DF7;&#x5408;&#x5E94;&#x7528;&#x4E2D;H5&#x597D;&#x5F88;&#x591A;&#xFF0C;&#x540C;&#x65F6;React Native&#x4F7F;&#x7528;&#x4E86;Web&#x5F00;&#x53D1;&#x6280;&#x672F;&#x6808;&#xFF0C;&#x4E5F;&#x53EA;&#x9700;&#x7EF4;&#x62A4;&#x4E00;&#x4EFD;&#x4EE3;&#x7801;&#xFF0C;&#x540C;&#x6837;&#x662F;&#x8DE8;&#x5E73;&#x53F0;&#x6846;&#x67B6;&#x3002;</p>
<h4 id="&#x603B;&#x7ED3;"><a name="&#x603B;&#x7ED3;" class="anchor-navigation-ex-anchor" href="#&#x603B;&#x7ED3;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x603B;&#x7ED3;</h4>
<p>JavaScript&#x5F00;&#x53D1;+&#x539F;&#x751F;&#x6E32;&#x67D3;&#x7684;&#x65B9;&#x5F0F;&#x4E3B;&#x8981;&#x4F18;&#x70B9;&#x5982;&#x4E0B;&#xFF1A;</p>
<ul>
<li>&#x91C7;&#x7528;Web&#x5F00;&#x53D1;&#x6280;&#x672F;&#x6808;&#xFF0C;&#x793E;&#x533A;&#x5E9E;&#x5927;&#x3001;&#x4E0A;&#x624B;&#x5FEB;&#x3001;&#x5F00;&#x53D1;&#x6210;&#x672C;&#x76F8;&#x5BF9;&#x8F83;&#x4F4E;&#x3002;</li>
<li>&#x539F;&#x751F;&#x6E32;&#x67D3;&#xFF0C;&#x6027;&#x80FD;&#x76F8;&#x6BD4;H5&#x63D0;&#x9AD8;&#x5F88;&#x591A;&#x3002;</li>
<li>&#x52A8;&#x6001;&#x5316;&#x8F83;&#x597D;&#xFF0C;&#x652F;&#x6301;&#x70ED;&#x66F4;&#x65B0;&#x3002;</li>
</ul>
<p>&#x4E0D;&#x8DB3;&#xFF1A;</p>
<ul>
<li>&#x6E32;&#x67D3;&#x65F6;&#x9700;&#x8981;JavaScript&#x548C;&#x539F;&#x751F;&#x4E4B;&#x95F4;&#x901A;&#x4FE1;&#xFF0C;&#x5728;&#x6709;&#x4E9B;&#x573A;&#x666F;&#x5982;&#x62D6;&#x52A8;&#x53EF;&#x80FD;&#x4F1A;&#x56E0;&#x4E3A;&#x901A;&#x4FE1;&#x9891;&#x7E41;&#x5BFC;&#x81F4;&#x5361;&#x987F;&#x3002;</li>
<li>JavaScript&#x4E3A;&#x811A;&#x672C;&#x8BED;&#x8A00;&#xFF0C;&#x6267;&#x884C;&#x65F6;&#x9700;&#x8981;JIT(Just In Time)&#xFF0C;&#x6267;&#x884C;&#x6548;&#x7387;&#x548C;AOT(Ahead Of Time)&#x4EE3;&#x7801;&#x4ECD;&#x6709;&#x5DEE;&#x8DDD;&#x3002;</li>
<li>&#x7531;&#x4E8E;&#x6E32;&#x67D3;&#x4F9D;&#x8D56;&#x539F;&#x751F;&#x63A7;&#x4EF6;&#xFF0C;&#x4E0D;&#x540C;&#x5E73;&#x53F0;&#x7684;&#x63A7;&#x4EF6;&#x9700;&#x8981;&#x5355;&#x72EC;&#x7EF4;&#x62A4;&#xFF0C;&#x5E76;&#x4E14;&#x5F53;&#x7CFB;&#x7EDF;&#x66F4;&#x65B0;&#x65F6;&#xFF0C;&#x793E;&#x533A;&#x63A7;&#x4EF6;&#x53EF;&#x80FD;&#x4F1A;&#x6EDE;&#x540E;&#xFF1B;&#x9664;&#x6B64;&#x4E4B;&#x5916;&#xFF0C;&#x5176;&#x63A7;&#x4EF6;&#x7CFB;&#x7EDF;&#x4E5F;&#x4F1A;&#x53D7;&#x5230;&#x539F;&#x751F;UI&#x7CFB;&#x7EDF;&#x9650;&#x5236;&#xFF0C;&#x4F8B;&#x5982;&#xFF0C;&#x5728;Android&#x4E2D;&#xFF0C;&#x624B;&#x52BF;&#x51B2;&#x7A81;&#x6D88;&#x6B67;&#x89C4;&#x5219;&#x662F;&#x56FA;&#x5B9A;&#x7684;&#xFF0C;&#x8FD9;&#x5728;&#x4F7F;&#x7528;&#x4E0D;&#x540C;&#x4EBA;&#x5199;&#x7684;&#x63A7;&#x4EF6;&#x5D4C;&#x5957;&#x65F6;&#xFF0C;&#x624B;&#x52BF;&#x51B2;&#x7A81;&#x95EE;&#x9898;&#x5C06;&#x4F1A;&#x53D8;&#x5F97;&#x975E;&#x5E38;&#x68D8;&#x624B;&#x3002;</li>
</ul>
<h2 id="flutter-&#x4E3A;&#x4EC0;&#x4E48;&#x5FEB;&#xFF1F;flutter-&#x76F8;&#x6BD4;-rn-&#x7684;&#x4F18;&#x52BF;&#x5728;&#x54EA;&#x91CC;&#xFF1F;"><a name="flutter-&#x4E3A;&#x4EC0;&#x4E48;&#x5FEB;&#xFF1F;flutter-&#x76F8;&#x6BD4;-rn-&#x7684;&#x4F18;&#x52BF;&#x5728;&#x54EA;&#x91CC;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#flutter-&#x4E3A;&#x4EC0;&#x4E48;&#x5FEB;&#xFF1F;flutter-&#x76F8;&#x6BD4;-rn-&#x7684;&#x4F18;&#x52BF;&#x5728;&#x54EA;&#x91CC;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a>Flutter &#x4E3A;&#x4EC0;&#x4E48;&#x5FEB;&#xFF1F;Flutter &#x76F8;&#x6BD4; RN &#x7684;&#x4F18;&#x52BF;&#x5728;&#x54EA;&#x91CC;&#xFF1F;</h2>
<p>&#x4ECE;&#x67B6;&#x6784;&#x4E2D;&#x5B9E;&#x9645;&#x4E0A;&#x5DF2;&#x7ECF;&#x80FD;&#x770B;&#x51FA; Flutter &#x4E3A;&#x4EC0;&#x4E48;&#x5FEB;&#xFF0C;&#x81F3;&#x5C11;&#x76F8;&#x6BD4;&#x4E4B;&#x524D;&#x7684;&#x5F53;&#x7EA2;&#x70B8;&#x5B50;&#x9E21; React Native &#x5FEB;&#x7684;&#x539F;&#x56E0;&#x4E86;&#x3002;</p>
<ul>
<li>Skia &#x5F15;&#x64CE;&#xFF0C;Chrome&#xFF0C; Chrome OS&#xFF0C;Android&#xFF0C;Firefox&#xFF0C;Firefox OS &#x90FD;&#x4EE5;&#x6B64;&#x4F5C;&#x4E3A;&#x6E32;&#x67D3;&#x5F15;&#x64CE;&#x3002;</li>
<li>Dart &#x8BED;&#x8A00;&#x53EF;&#x4EE5; AOT &#x7F16;&#x8BD1;&#x6210; ARM Code&#xFF0C;&#x8BA9;&#x5E03;&#x5C40;&#x4EE5;&#x53CA;&#x4E1A;&#x52A1;&#x4EE3;&#x7801;&#x8FD0;&#x884C;&#x7684;&#x6700;&#x5FEB;&#xFF0C;&#x800C;&#x4E14; Dart &#x7684; GC &#x9488;&#x5BF9; Flutter &#x9891;&#x7E41;&#x9500;&#x6BC1;&#x521B;&#x5EFA; Widget &#x505A;&#x4E86;&#x4E13;&#x95E8;&#x7684;&#x4F18;&#x5316;&#x3002;</li>
<li>CSS &#x7684;&#x5B50;&#x96C6; Flex like &#x7684;&#x5E03;&#x5C40;&#x65B9;&#x5F0F;&#xFF0C;&#x4FDD;&#x7559;&#x5F3A;&#x5927;&#x8868;&#x73B0;&#x80FD;&#x529B;&#x7684;&#x540C;&#x65F6;&#xFF0C;&#x4E5F;&#x4FDD;&#x7559;&#x4E86;&#x6027;&#x80FD;&#x3002;</li>
<li>Flutter &#x4E1A;&#x52A1;&#x4E66;&#x5199;&#x7684; Widget &#x5728;&#x6E32;&#x67D3;&#x4E4B;&#x524D; diff &#x8F6C;&#x5316;&#x6210; Render Object&#xFF0C;&#x5BF9;&#xFF0C;&#x5C31;&#x50CF; React &#x4E2D;&#x7684; Virtual DOM&#xFF0C;&#x4EE5;&#x6B64;&#x6765;&#x786E;&#x4FDD;&#x5F00;&#x53D1;&#x4F53;&#x9A8C;&#x548C;&#x6027;&#x80FD;&#x3002;</li>
</ul>
<p>&#x800C;&#x76F8;&#x6BD4; React Native&#xFF1A;</p>
<ul>
<li>RN &#x4F7F;&#x7528; JavaScript &#x6765;&#x8FD0;&#x884C;&#x4E1A;&#x52A1;&#x4EE3;&#x7801;&#xFF0C;&#x7136;&#x540E; JS Bridge &#x7684;&#x65B9;&#x5F0F;&#x8C03;&#x7528;&#x5E73;&#x53F0;&#x76F8;&#x5173;&#x7EC4;&#x4EF6;&#xFF0C;&#x6027;&#x80FD;&#x6BD4;&#x6709;&#x635F;&#x5931;&#xFF0C;&#x751A;&#x81F3;&#x5E73;&#x53F0;&#x4E0D;&#x540C; js &#x5F15;&#x64CE;&#x90FD;&#x4E0D;&#x4E00;&#x6837;&#x3002;</li>
<li>RN &#x4F7F;&#x7528;&#x5E73;&#x53F0;&#x7EC4;&#x4EF6;&#xFF0C;&#x884C;&#x4E3A;&#x4E00;&#x81F4;&#x6027;&#x4F1A;&#x6709;&#x6253;&#x6298;&#xFF0C;&#x6216;&#x8005;&#x8BF4;&#xFF0C;&#x5F00;&#x53D1;&#x8005;&#x9700;&#x8981;&#x5904;&#x7406;&#x66F4;&#x591A;&#x5E73;&#x53F0;&#x76F8;&#x5173;&#x7684;&#x95EE;&#x9898;&#x3002;</li>
</ul>
<p>&#x963F;&#x91CC;&#x5DF4;&#x5DF4;&#x65D7;&#x4E0B;&#x95F2;&#x9C7C;&#x6280;&#x672F;&#x56E2;&#x961F;&#x662F;&#x56FD;&#x5185;&#x6BD4;&#x8F83;&#x65E9;&#x4F7F;&#x7528;Flutter&#x7684;&#x56E2;&#x961F;&#xFF0C;&#x4ED6;&#x4EEC;&#x5BF9;&#x4E8E;Flutter&#x6280;&#x672F;&#x5199;&#x4E86;&#x5F88;&#x591A;&#x5E72;&#x8D27;&#x6587;&#x7AE0;&#xFF0C;&#x5730;&#x5740;&#x5728;&#x8FD9;&#x91CC; <a href="https://www.yuque.com/xytech/flutter" target="_blank">&#x94FE;&#x63A5;</a>,&#x5173;&#x4E8E;Flutter&#x548C;RN&#x7684;&#x6027;&#x80FD;&#x6D4B;&#x8BD5;&#xFF0C;&#x4ED6;&#x4EEC;&#x4E5F;&#x5199;&#x4E86;&#x4E00;&#x7BC7;&#x6280;&#x672F;&#x6587;&#x7AE0;&#xFF0C;&#x53EF;&#x4EE5;&#x770B;<a href="https://www.yuque.com/xytech/flutter/gs3pnk" target="_blank">&#x8FD9;&#x91CC;</a>&#xFF0C;&#x7ED3;&#x8BBA;&#x662F; Flutter&#xFF0C;&#x5728; CPU&#xFF0C;FPS&#xFF0C;&#x5185;&#x5B58;&#x7A33;&#x5B9A;&#x4E0A;&#x5747;&#x4F18;&#x4E8E; ReactNative&#x3002;</p>
<h2 id="dart-&#x8BED;&#x8A00;"><a name="dart-&#x8BED;&#x8A00;" class="anchor-navigation-ex-anchor" href="#dart-&#x8BED;&#x8A00;"><i class="fa fa-link" aria-hidden="true"></i></a>Dart &#x8BED;&#x8A00;</h2>
<p>&#x5728;&#x5F00;&#x59CB; Flutter &#x4E4B;&#x524D;&#xFF0C;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x5148;&#x4E86;&#x89E3;&#x4E0B; Dart &#x8BED;&#x8A00;</p>
<p>Dart &#x662F;&#x7531; Google &#x5F00;&#x53D1;&#xFF0C;&#x6700;&#x521D;&#x662F;&#x60F3;&#x4F5C;&#x4E3A; JavaScript &#x66FF;&#x4EE3;&#x8BED;&#x8A00;&#xFF0C;&#x4F46;&#x662F;&#x5931;&#x8D25;&#x6C89;&#x5BC2;&#x4E4B;&#x540E;&#xFF0C;&#x4F5C;&#x4E3A; Flutter &#x72EC;&#x6709;&#x5F00;&#x53D1;&#x8BED;&#x8A00;&#x53C8;&#x7115;&#x53D1;&#x4E86;&#x7B2C;&#x4E8C;&#x6625;&#x3002;</p>
<p>&#x5B9E;&#x9645;&#x4E0A;&#x5373;&#x4F7F;&#x5230;&#x4E86; 2.0&#xFF0C;Dart &#x8BED;&#x6CD5;&#x548C; JavaScriptFlutter&#x975E;&#x5E38;&#x7684;&#x76F8;&#x50CF;&#x3002;&#x5355;&#x7EBF;&#x7A0B;&#xFF0C;Event Loop&#x2026;&#x2026;
<img src="https://i.loli.net/2019/11/17/3KtvxBMbcFuaYsU.png" alt="2.jpg">
Dart &#x76F8;&#x6BD4;&#x4E8E;Flutter  &#x6709;&#x4E00;&#x4E9B;&#x66F4;&#x751C;&#x7684;&#x8BED;&#x6CD5;&#x7CD6;</p>
<ul>
<li>&#x4E0D;&#x4F1A;&#x98D8;&#x7684; this</li>
<li>&#x5F3A;&#x7C7B;&#x578B;&#xFF0C;&#x5F53;&#x7136;&#x524D;&#x7AEF;&#x73B0;&#x5728;&#x6709;&#x4E86; TypeScript </li>
<li><p>&#x5F3A;&#x5927;&#x65B9;&#x4FBF;&#x7684;&#x64CD;&#x4F5C;&#x7B26;&#x53F7;&#xFF1A;</p>
</li>
<li><p><kbd>?.</kbd> &#x65B9;&#x4FBF;&#x5B89;&#x5168;&#x7684; <kbd>foo?.bar</kbd>&#x53D6;&#x503C;&#xFF0C;&#x5982;&#x679C; foo &#x4E3A; null&#xFF0C;&#x90A3;&#x4E48;&#x53D6;&#x503C;&#x4E3A; null</p>
</li>
<li><kbd>??</kbd> <kbd>condition?expr1:expr2</kbd> &#x53EF;&#x4EE5;&#x7B80;&#x5199;&#x4E3A; <kbd>expr1??expr2</kbd></li>
<li><kbd>=</kbd>&#x548C;&#x5176;&#x4ED6;&#x7B26;&#x53F7;&#x7684;&#x7EC4;&#x5408;: <kbd>*=</kbd>&#x3001; <kbd>~/=</kbd>&#x3001; <kbd>&amp;=</kbd>&#x3001; <kbd>|=</kbd> &#x2026;&#x2026;</li>
<li>&#x7EA7;&#x8054;&#x64CD;&#x4F5C;&#x7B26;(Cascade notation ..)</li>
</ul>
<p>&#x6BD4;&#x5982;</p>
<pre class="language-"><code class="lang-dart"><span class="token function">querySelect</span><span class="token punctuation">(</span><span class="token string">&apos;#button&apos;</span><span class="token punctuation">)</span>
 <span class="token punctuation">.</span><span class="token punctuation">.</span>text <span class="token operator">=</span><span class="token string">&quot;Confirm&quot;</span>
 <span class="token punctuation">.</span><span class="token punctuation">.</span>classes<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">&apos;important&apos;</span><span class="token punctuation">)</span>
 <span class="token punctuation">.</span><span class="token punctuation">.</span>onClick<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> window<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&apos;Confirmed&apos;</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre>
<p>&#x751A;&#x81F3;&#x53EF;&#x4EE5;&#x91CD;&#x5199;&#x64CD;&#x4F5C;&#x7B26;</p>
<pre class="language-"><code class="lang-dart"><span class="token keyword">class</span> <span class="token class-name">Vector</span> <span class="token punctuation">{</span>
  <span class="token keyword">final</span> int x<span class="token punctuation">,</span> y<span class="token punctuation">;</span>

  <span class="token function">Vector</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>x<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>y<span class="token punctuation">)</span><span class="token punctuation">;</span>

  Vector <span class="token keyword">operator</span> <span class="token operator">+</span><span class="token punctuation">(</span>Vector v<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token function">Vector</span><span class="token punctuation">(</span>x <span class="token operator">+</span> v<span class="token punctuation">.</span>x<span class="token punctuation">,</span> y <span class="token operator">+</span> v<span class="token punctuation">.</span>y<span class="token punctuation">)</span><span class="token punctuation">;</span>
  Vector <span class="token keyword">operator</span> <span class="token operator">-</span><span class="token punctuation">(</span>Vector v<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token function">Vector</span><span class="token punctuation">(</span>x <span class="token operator">-</span> v<span class="token punctuation">.</span>x<span class="token punctuation">,</span> y <span class="token operator">-</span> v<span class="token punctuation">.</span>y<span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">// Operator == and hashCode not shown. For details, see note below.</span>
  <span class="token comment">// &#xB7;&#xB7;&#xB7;</span>
<span class="token punctuation">}</span>

<span class="token keyword">void</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">final</span> v <span class="token operator">=</span> <span class="token function">Vector</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">final</span> w <span class="token operator">=</span> <span class="token function">Vector</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">assert</span><span class="token punctuation">(</span>v <span class="token operator">+</span> w <span class="token operator">==</span> <span class="token function">Vector</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">assert</span><span class="token punctuation">(</span>v <span class="token operator">-</span> w <span class="token operator">==</span> <span class="token function">Vector</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>&#x6CE8;&#xFF1A;&#x91CD;&#x5199; ==&#xFF0C;&#x4E5F;&#x9700;&#x8981;&#x91CD;&#x5199; Object hashCodegetter</p>
<pre class="language-"><code class="lang-dart"><span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>
  <span class="token keyword">final</span> String firstName<span class="token punctuation">,</span> lastName<span class="token punctuation">;</span>

  <span class="token function">Person</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>firstName<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>lastName<span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">// Override hashCode using strategy from Effective Java,</span>
  <span class="token comment">// Chapter 11.</span>
  <span class="token metadata symbol">@override</span>
  int <span class="token keyword">get</span> hashCode <span class="token punctuation">{</span>
    int result <span class="token operator">=</span> <span class="token number">17</span><span class="token punctuation">;</span>
    result <span class="token operator">=</span> <span class="token number">37</span> <span class="token operator">*</span> result <span class="token operator">+</span> firstName<span class="token punctuation">.</span>hashCode<span class="token punctuation">;</span>
    result <span class="token operator">=</span> <span class="token number">37</span> <span class="token operator">*</span> result <span class="token operator">+</span> lastName<span class="token punctuation">.</span>hashCode<span class="token punctuation">;</span>
    <span class="token keyword">return</span> result<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// You should generally implement operator == if you</span>
  <span class="token comment">// override hashCode.</span>
  <span class="token metadata symbol">@override</span>
  bool <span class="token keyword">operator</span> <span class="token operator">==</span><span class="token punctuation">(</span><span class="token keyword">dynamic</span> other<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>other <span class="token operator">is!</span> Person<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
    Person person <span class="token operator">=</span> other<span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>person<span class="token punctuation">.</span>firstName <span class="token operator">==</span> firstName <span class="token operator">&amp;&amp;</span>
        person<span class="token punctuation">.</span>lastName <span class="token operator">==</span> lastName<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">void</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> p1 <span class="token operator">=</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token string">&apos;Bob&apos;</span><span class="token punctuation">,</span> <span class="token string">&apos;Smith&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">var</span> p2 <span class="token operator">=</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token string">&apos;Bob&apos;</span><span class="token punctuation">,</span> <span class="token string">&apos;Smith&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">var</span> p3 <span class="token operator">=</span> <span class="token string">&apos;not a person&apos;</span><span class="token punctuation">;</span>
  <span class="token keyword">assert</span><span class="token punctuation">(</span>p1<span class="token punctuation">.</span>hashCode <span class="token operator">==</span> p2<span class="token punctuation">.</span>hashCode<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">assert</span><span class="token punctuation">(</span>p1 <span class="token operator">==</span> p2<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">assert</span><span class="token punctuation">(</span>p1 <span class="token operator">!=</span> p3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>&#x8FD9;&#x70B9;&#x5728; diff &#x5BF9;&#x8C61;&#x7684;&#x65F6;&#x5019;&#x5C24;&#x5176;&#x6709;&#x7528;&#x3002;</p>
<h2 id="dart&#x4E2D;&#x7684;&#x5F02;&#x6B65;&#x652F;&#x6301;"><a name="dart&#x4E2D;&#x7684;&#x5F02;&#x6B65;&#x652F;&#x6301;" class="anchor-navigation-ex-anchor" href="#dart&#x4E2D;&#x7684;&#x5F02;&#x6B65;&#x652F;&#x6301;"><i class="fa fa-link" aria-hidden="true"></i></a>dart&#x4E2D;&#x7684;&#x5F02;&#x6B65;&#x652F;&#x6301;</h2>
<p>Dart&#x7C7B;&#x5E93;&#x6709;&#x975E;&#x5E38;&#x591A;&#x7684;&#x8FD4;&#x56DE;Future&#x6216;&#x8005;Stream&#x5BF9;&#x8C61;&#x7684;&#x51FD;&#x6570;&#x3002; &#x8FD9;&#x4E9B;&#x51FD;&#x6570;&#x88AB;&#x79F0;&#x4E3A;&#x5F02;&#x6B65;&#x51FD;&#x6570;&#xFF1A;&#x5B83;&#x4EEC;&#x53EA;&#x4F1A;&#x5728;&#x8BBE;&#x7F6E;&#x597D;&#x4E00;&#x4E9B;&#x8017;&#x65F6;&#x64CD;&#x4F5C;&#x4E4B;&#x540E;&#x8FD4;&#x56DE;&#xFF0C;&#x6BD4;&#x5982;&#x50CF; IO&#x64CD;&#x4F5C;&#x3002;&#x800C;&#x4E0D;&#x662F;&#x7B49;&#x5230;&#x8FD9;&#x4E2A;&#x64CD;&#x4F5C;&#x5B8C;&#x6210;&#x3002;</p>
<p>async&#x548C;await&#x5173;&#x952E;&#x8BCD;&#x652F;&#x6301;&#x4E86;&#x5F02;&#x6B65;&#x7F16;&#x7A0B;&#xFF0C;&#x5141;&#x8BB8;&#x60A8;&#x5199;&#x51FA;&#x548C;&#x540C;&#x6B65;&#x4EE3;&#x7801;&#x5F88;&#x50CF;&#x7684;&#x5F02;&#x6B65;&#x4EE3;&#x7801;&#x3002;</p>
<h3 id="future"><a name="future" class="anchor-navigation-ex-anchor" href="#future"><i class="fa fa-link" aria-hidden="true"></i></a>Future</h3>
<p>Future&#x4E0E;JavaScript&#x4E2D;&#x7684;Promise&#x975E;&#x5E38;&#x76F8;&#x4F3C;&#xFF0C;&#x8868;&#x793A;&#x4E00;&#x4E2A;&#x5F02;&#x6B65;&#x64CD;&#x4F5C;&#x7684;&#x6700;&#x7EC8;&#x5B8C;&#x6210;&#xFF08;&#x6216;&#x5931;&#x8D25;&#xFF09;&#x53CA;&#x5176;&#x7ED3;&#x679C;&#x503C;&#x7684;&#x8868;&#x793A;&#x3002;&#x7B80;&#x5355;&#x6765;&#x8BF4;&#xFF0C;&#x5B83;&#x5C31;&#x662F;&#x7528;&#x4E8E;&#x5904;&#x7406;&#x5F02;&#x6B65;&#x64CD;&#x4F5C;&#x7684;&#xFF0C;&#x5F02;&#x6B65;&#x5904;&#x7406;&#x6210;&#x529F;&#x4E86;&#x5C31;&#x6267;&#x884C;&#x6210;&#x529F;&#x7684;&#x64CD;&#x4F5C;&#xFF0C;&#x5F02;&#x6B65;&#x5904;&#x7406;&#x5931;&#x8D25;&#x4E86;&#x5C31;&#x6355;&#x83B7;&#x9519;&#x8BEF;&#x6216;&#x8005;&#x505C;&#x6B62;&#x540E;&#x7EED;&#x64CD;&#x4F5C;&#x3002;&#x4E00;&#x4E2A;Future&#x53EA;&#x4F1A;&#x5BF9;&#x5E94;&#x4E00;&#x4E2A;&#x7ED3;&#x679C;&#xFF0C;&#x8981;&#x4E48;&#x6210;&#x529F;&#xFF0C;&#x8981;&#x4E48;&#x5931;&#x8D25;&#x3002;</p>
<p>&#x7531;&#x4E8E;&#x672C;&#x8EAB;&#x529F;&#x80FD;&#x8F83;&#x591A;&#xFF0C;&#x8FD9;&#x91CC;&#x6211;&#x4EEC;&#x53EA;&#x4ECB;&#x7ECD;&#x5176;&#x5E38;&#x7528;&#x7684;API&#x53CA;&#x7279;&#x6027;&#x3002;&#x8FD8;&#x6709;&#xFF0C;&#x8BF7;&#x8BB0;&#x4F4F;&#xFF0C;Future &#x7684;&#x6240;&#x6709;API&#x7684;&#x8FD4;&#x56DE;&#x503C;&#x4ECD;&#x7136;&#x662F;&#x4E00;&#x4E2A;Future&#x5BF9;&#x8C61;&#xFF0C;&#x6240;&#x4EE5;&#x53EF;&#x4EE5;&#x5F88;&#x65B9;&#x4FBF;&#x7684;&#x8FDB;&#x884C;&#x94FE;&#x5F0F;&#x8C03;&#x7528;&#x3002;</p>
<h3 id="futurethen"><a name="futurethen" class="anchor-navigation-ex-anchor" href="#futurethen"><i class="fa fa-link" aria-hidden="true"></i></a>Future.then</h3>
<p>&#x4E3A;&#x4E86;&#x65B9;&#x4FBF;&#x793A;&#x4F8B;&#xFF0C;&#x5728;&#x672C;&#x4F8B;&#x4E2D;&#x6211;&#x4EEC;&#x4F7F;&#x7528;Future.delayed &#x521B;&#x5EFA;&#x4E86;&#x4E00;&#x4E2A;&#x5EF6;&#x65F6;&#x4EFB;&#x52A1;&#xFF08;&#x5B9E;&#x9645;&#x573A;&#x666F;&#x4F1A;&#x662F;&#x4E00;&#x4E2A;&#x771F;&#x6B63;&#x7684;&#x8017;&#x65F6;&#x4EFB;&#x52A1;&#xFF0C;&#x6BD4;&#x5982;&#x4E00;&#x6B21;&#x7F51;&#x7EDC;&#x8BF7;&#x6C42;&#xFF09;&#xFF0C;&#x5373;2&#x79D2;&#x540E;&#x8FD4;&#x56DE;&#x7ED3;&#x679C;&#x5B57;&#x7B26;&#x4E32;&quot;hi world!&quot;&#xFF0C;&#x7136;&#x540E;&#x6211;&#x4EEC;&#x5728;then&#x4E2D;&#x63A5;&#x6536;&#x5F02;&#x6B65;&#x7ED3;&#x679C;&#x5E76;&#x6253;&#x5370;&#x7ED3;&#x679C;&#xFF0C;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre class="language-"><code class="lang-dart">Future<span class="token punctuation">.</span><span class="token function">delayed</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Duration</span><span class="token punctuation">(</span>seconds<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
   <span class="token keyword">return</span> <span class="token string">&quot;hi world!&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">{</span>
   <span class="token function">print</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<h3 id="futurecatcherror"><a name="futurecatcherror" class="anchor-navigation-ex-anchor" href="#futurecatcherror"><i class="fa fa-link" aria-hidden="true"></i></a>Future.catchError</h3>
<p>&#x5982;&#x679C;&#x5F02;&#x6B65;&#x4EFB;&#x52A1;&#x53D1;&#x751F;&#x9519;&#x8BEF;&#xFF0C;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x5728;catchError&#x4E2D;&#x6355;&#x83B7;&#x9519;&#x8BEF;&#xFF0C;&#x6211;&#x4EEC;&#x5C06;&#x4E0A;&#x9762;&#x793A;&#x4F8B;&#x6539;&#x4E3A;&#xFF1A;</p>
<pre class="language-"><code class="lang-dart">Future<span class="token punctuation">.</span><span class="token function">delayed</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Duration</span><span class="token punctuation">(</span>seconds<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
   <span class="token comment">//return &quot;hi world!&quot;;</span>
   <span class="token keyword">throw</span> <span class="token function">AssertionError</span><span class="token punctuation">(</span><span class="token string">&quot;Error&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">{</span>
   <span class="token comment">//&#x6267;&#x884C;&#x6210;&#x529F;&#x4F1A;&#x8D70;&#x5230;&#x8FD9;&#x91CC;  </span>
   <span class="token function">print</span><span class="token punctuation">(</span><span class="token string">&quot;success&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catchError</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">{</span>
   <span class="token comment">//&#x6267;&#x884C;&#x5931;&#x8D25;&#x4F1A;&#x8D70;&#x5230;&#x8FD9;&#x91CC;  </span>
   <span class="token function">print</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>&#x5728;&#x672C;&#x793A;&#x4F8B;&#x4E2D;&#xFF0C;&#x6211;&#x4EEC;&#x5728;&#x5F02;&#x6B65;&#x4EFB;&#x52A1;&#x4E2D;&#x629B;&#x51FA;&#x4E86;&#x4E00;&#x4E2A;&#x5F02;&#x5E38;&#xFF0C;then&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#x5C06;&#x4E0D;&#x4F1A;&#x88AB;&#x6267;&#x884C;&#xFF0C;&#x53D6;&#x800C;&#x4EE3;&#x4E4B;&#x7684;&#x662F; catchError&#x56DE;&#x8C03;&#x51FD;&#x6570;&#x5C06;&#x88AB;&#x8C03;&#x7528;&#xFF1B;&#x4F46;&#x662F;&#xFF0C;&#x5E76;&#x4E0D;&#x662F;&#x53EA;&#x6709; catchError&#x56DE;&#x8C03;&#x624D;&#x80FD;&#x6355;&#x83B7;&#x9519;&#x8BEF;&#xFF0C;then&#x65B9;&#x6CD5;&#x8FD8;&#x6709;&#x4E00;&#x4E2A;&#x53EF;&#x9009;&#x53C2;&#x6570;onError&#xFF0C;&#x6211;&#x4EEC;&#x4E5F;&#x53EF;&#x4EE5;&#x5B83;&#x6765;&#x6355;&#x83B7;&#x5F02;&#x5E38;&#xFF1A;</p>
<pre class="language-"><code class="lang-dart">Future<span class="token punctuation">.</span><span class="token function">delayed</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Duration</span><span class="token punctuation">(</span>seconds<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">//return &quot;hi world!&quot;;</span>
    <span class="token keyword">throw</span> <span class="token function">AssertionError</span><span class="token punctuation">(</span><span class="token string">&quot;Error&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">print</span><span class="token punctuation">(</span><span class="token string">&quot;success&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> onError<span class="token punctuation">:</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">print</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<h3 id="futurewhencomplete"><a name="futurewhencomplete" class="anchor-navigation-ex-anchor" href="#futurewhencomplete"><i class="fa fa-link" aria-hidden="true"></i></a>Future.whenComplete</h3>
<p>&#x6709;&#x4E9B;&#x65F6;&#x5019;&#xFF0C;&#x6211;&#x4EEC;&#x4F1A;&#x9047;&#x5230;&#x65E0;&#x8BBA;&#x5F02;&#x6B65;&#x4EFB;&#x52A1;&#x6267;&#x884C;&#x6210;&#x529F;&#x6216;&#x5931;&#x8D25;&#x90FD;&#x9700;&#x8981;&#x505A;&#x4E00;&#x4E9B;&#x4E8B;&#x7684;&#x573A;&#x666F;&#xFF0C;&#x6BD4;&#x5982;&#x5728;&#x7F51;&#x7EDC;&#x8BF7;&#x6C42;&#x524D;&#x5F39;&#x51FA;&#x52A0;&#x8F7D;&#x5BF9;&#x8BDD;&#x6846;&#xFF0C;&#x5728;&#x8BF7;&#x6C42;&#x7ED3;&#x675F;&#x540E;&#x5173;&#x95ED;&#x5BF9;&#x8BDD;&#x6846;&#x3002;&#x8FD9;&#x79CD;&#x573A;&#x666F;&#xFF0C;&#x6709;&#x4E24;&#x79CD;&#x65B9;&#x6CD5;&#xFF0C;&#x7B2C;&#x4E00;&#x79CD;&#x662F;&#x5206;&#x522B;&#x5728;then&#x6216;catch&#x4E2D;&#x5173;&#x95ED;&#x4E00;&#x4E0B;&#x5BF9;&#x8BDD;&#x6846;&#xFF0C;&#x7B2C;&#x4E8C;&#x79CD;&#x5C31;&#x662F;&#x4F7F;&#x7528;Future&#x7684;whenComplete&#x56DE;&#x8C03;&#xFF0C;&#x6211;&#x4EEC;&#x5C06;&#x4E0A;&#x9762;&#x793A;&#x4F8B;&#x6539;&#x4E00;&#x4E0B;&#xFF1A;</p>
<pre class="language-"><code class="lang-dart">Future<span class="token punctuation">.</span><span class="token function">delayed</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Duration</span><span class="token punctuation">(</span>seconds<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
   <span class="token comment">//return &quot;hi world!&quot;;</span>
   <span class="token keyword">throw</span> <span class="token function">AssertionError</span><span class="token punctuation">(</span><span class="token string">&quot;Error&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">{</span>
   <span class="token comment">//&#x6267;&#x884C;&#x6210;&#x529F;&#x4F1A;&#x8D70;&#x5230;&#x8FD9;&#x91CC; </span>
   <span class="token function">print</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catchError</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">{</span>
   <span class="token comment">//&#x6267;&#x884C;&#x5931;&#x8D25;&#x4F1A;&#x8D70;&#x5230;&#x8FD9;&#x91CC;   </span>
   <span class="token function">print</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">whenComplete</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
   <span class="token comment">//&#x65E0;&#x8BBA;&#x6210;&#x529F;&#x6216;&#x5931;&#x8D25;&#x90FD;&#x4F1A;&#x8D70;&#x5230;&#x8FD9;&#x91CC;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<h3 id="futurewait"><a name="futurewait" class="anchor-navigation-ex-anchor" href="#futurewait"><i class="fa fa-link" aria-hidden="true"></i></a>Future.wait</h3>
<p>&#x6709;&#x4E9B;&#x65F6;&#x5019;&#xFF0C;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x7B49;&#x5F85;&#x591A;&#x4E2A;&#x5F02;&#x6B65;&#x4EFB;&#x52A1;&#x90FD;&#x6267;&#x884C;&#x7ED3;&#x675F;&#x540E;&#x624D;&#x8FDB;&#x884C;&#x4E00;&#x4E9B;&#x64CD;&#x4F5C;&#xFF0C;&#x6BD4;&#x5982;&#x6211;&#x4EEC;&#x6709;&#x4E00;&#x4E2A;&#x754C;&#x9762;&#xFF0C;&#x9700;&#x8981;&#x5148;&#x5206;&#x522B;&#x4ECE;&#x4E24;&#x4E2A;&#x7F51;&#x7EDC;&#x63A5;&#x53E3;&#x83B7;&#x53D6;&#x6570;&#x636E;&#xFF0C;&#x83B7;&#x53D6;&#x6210;&#x529F;&#x540E;&#xFF0C;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x5C06;&#x4E24;&#x4E2A;&#x63A5;&#x53E3;&#x6570;&#x636E;&#x8FDB;&#x884C;&#x7279;&#x5B9A;&#x7684;&#x5904;&#x7406;&#x540E;&#x518D;&#x663E;&#x793A;&#x5230;UI&#x754C;&#x9762;&#x4E0A;&#xFF0C;&#x5E94;&#x8BE5;&#x600E;&#x4E48;&#x505A;&#xFF1F;&#x7B54;&#x6848;&#x662F;Future.wait&#xFF0C;&#x5B83;&#x63A5;&#x53D7;&#x4E00;&#x4E2A;Future&#x6570;&#x7EC4;&#x53C2;&#x6570;&#xFF0C;&#x53EA;&#x6709;&#x6570;&#x7EC4;&#x4E2D;&#x6240;&#x6709;Future&#x90FD;&#x6267;&#x884C;&#x6210;&#x529F;&#x540E;&#xFF0C;&#x624D;&#x4F1A;&#x89E6;&#x53D1;then&#x7684;&#x6210;&#x529F;&#x56DE;&#x8C03;&#xFF0C;&#x53EA;&#x8981;&#x6709;&#x4E00;&#x4E2A;Future&#x6267;&#x884C;&#x5931;&#x8D25;&#xFF0C;&#x5C31;&#x4F1A;&#x89E6;&#x53D1;&#x9519;&#x8BEF;&#x56DE;&#x8C03;&#x3002;&#x4E0B;&#x9762;&#xFF0C;&#x6211;&#x4EEC;&#x901A;&#x8FC7;&#x6A21;&#x62DF;Future.delayed &#x6765;&#x6A21;&#x62DF;&#x4E24;&#x4E2A;&#x6570;&#x636E;&#x83B7;&#x53D6;&#x7684;&#x5F02;&#x6B65;&#x4EFB;&#x52A1;&#xFF0C;&#x7B49;&#x4E24;&#x4E2A;&#x5F02;&#x6B65;&#x4EFB;&#x52A1;&#x90FD;&#x6267;&#x884C;&#x6210;&#x529F;&#x65F6;&#xFF0C;&#x5C06;&#x4E24;&#x4E2A;&#x5F02;&#x6B65;&#x4EFB;&#x52A1;&#x7684;&#x7ED3;&#x679C;&#x62FC;&#x63A5;&#x6253;&#x5370;&#x51FA;&#x6765;&#xFF0C;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre class="language-"><code class="lang-dart">Future<span class="token punctuation">.</span><span class="token function">wait</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
  <span class="token comment">// 2&#x79D2;&#x540E;&#x8FD4;&#x56DE;&#x7ED3;&#x679C;  </span>
  Future<span class="token punctuation">.</span><span class="token function">delayed</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Duration</span><span class="token punctuation">(</span>seconds<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token string">&quot;hello&quot;</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token comment">// 4&#x79D2;&#x540E;&#x8FD4;&#x56DE;&#x7ED3;&#x679C;  </span>
  Future<span class="token punctuation">.</span><span class="token function">delayed</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Duration</span><span class="token punctuation">(</span>seconds<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token string">&quot; world&quot;</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>results<span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token function">print</span><span class="token punctuation">(</span>results<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">+</span>results<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catchError</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token function">print</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>&#x6267;&#x884C;&#x4E0A;&#x9762;&#x4EE3;&#x7801;&#xFF0C;4&#x79D2;&#x540E;&#x4F60;&#x4F1A;&#x5728;&#x63A7;&#x5236;&#x53F0;&#x4E2D;&#x770B;&#x5230;&#x201C;hello world&#x201D;&#x3002;</p>
<!-- ### lsolate

Dart 运行在独立隔离的 iSolate 中就类似 JavaScript 一样，单线程事件驱动，但是 Dart 也开放了创建其他 isolate，充分利用 CPU 的多和能力。

``` dart
loadData() async {
   // 通过spawn新建一个isolate，并绑定静态方法
   ReceivePort receivePort =ReceivePort();
   await Isolate.spawn(dataLoader, receivePort.sendPort);

   // 获取新isolate的监听port
   SendPort sendPort = await receivePort.first;
   // 调用sendReceive自定义方法
   List dataList = await sendReceive(sendPort, 'https://hicc.me/posts');
   print('dataList $dataList');
}

// isolate的绑定方法
static dataLoader(SendPort sendPort) async{
   // 创建监听port，并将sendPort传给外界用来调用
   ReceivePort receivePort =ReceivePort();
   sendPort.send(receivePort.sendPort);

   // 监听外界调用
   await for (var msg in receivePort) {
     String requestURL =msg[0];
     SendPort callbackPort =msg[1];

     Client client = Client();
     Response response = await client.get(requestURL);
     List dataList = json.decode(response.body);
     // 回调返回值给调用者
     callbackPort.send(dataList);
  }    
}

// 创建自己的监听port，并且向新isolate发送消息
Future sendReceive(SendPort sendPort, String url) {
   ReceivePort receivePort =ReceivePort();
   sendPort.send([url, receivePort.sendPort]);
   // 接收到返回值，返回给调用者
   return receivePort.first;
}


```

当然 Flutter 中封装了[compute](https://api.flutter.dev/flutter/foundation/compute.html)，可以方便的使用，譬如[在其它 isolate 中解析大的 json](https://flutter.dev/docs/cookbook/networking/background-parsing)。 -->
<h2 id="dart-ui-as-code"><a name="dart-ui-as-code" class="anchor-navigation-ex-anchor" href="#dart-ui-as-code"><i class="fa fa-link" aria-hidden="true"></i></a>Dart UI as Code</h2>
<p>&#x5728;&#x8FD9;&#x91CC;&#x5355;&#x72EC;&#x63D0;&#x51FA;&#x6765;&#x7684;&#x610F;&#x4E49;&#x5728;&#x4E8E;&#xFF0C;&#x4ECE; React &#x5F00;&#x59CB;&#xFF0C;&#x5230; Flutter&#xFF0C;&#x5230;&#x6700;&#x8FD1;&#x7684; Apple SwiftUI&#xFF0C;Android Jetpack Compose &#x58F0;&#x660E;&#x5F0F;&#x7EC4;&#x4EF6;&#x5199;&#x6CD5;&#x8D8A;&#x53D1;&#x6D41;&#x884C;&#xFF0C;Web &#x524D;&#x7AEF;&#x4F7F;&#x7528; JSX &#x6765;&#x8BA9;&#x5F00;&#x53D1;&#x8005;&#x66F4;&#x65B9;&#x4FBF;&#x7684;&#x4E66;&#x5199;&#xFF0C;&#x800C; Flutter&#xFF0C;SwiftUI &#x5219;&#x76F4;&#x63A5;&#x4ECE;&#x4F18;&#x5316;&#x8BED;&#x8A00;&#x672C;&#x8EAB;&#x7740;&#x624B;&#x3002;</p>
<p><strong>&#x51FD;&#x6570;&#x7C7B;&#x7684;&#x547D;&#x540D;&#x53C2;&#x6570;</strong></p>
<pre class="language-"><code class="lang-dart"><span class="token keyword">void</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token metadata symbol">@required</span> int age<span class="token punctuation">,</span>String name<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">print</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">print</span><span class="token punctuation">(</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// &#x89E3;&#x51B3;&#x51FD;&#x6570;&#x8C03;&#x7528;&#x65F6;&#x5019;&#xFF0C;&#x53C2;&#x6570;&#x4E0D;&#x660E;&#x786E;&#x7684;&#x95EE;&#x9898;</span>
<span class="token function">test</span><span class="token punctuation">(</span>name<span class="token punctuation">:</span><span class="token string">&quot;hicc&quot;</span><span class="token punctuation">,</span>age<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">)</span>

<span class="token comment">// &#x8FD9;&#x6837;&#x5BF9;&#x4E8E;&#x7EC4;&#x4EF6;&#x7684;&#x4F7F;&#x7528;&#x5C24;&#x4E3A;&#x65B9;&#x4FBF;</span>
<span class="token keyword">class</span> <span class="token class-name">MyApp</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token metadata symbol">@override</span>
  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span>
      appBar<span class="token punctuation">:</span> <span class="token function">AppBar</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      body<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      floatingActionButton<span class="token punctuation">:</span><span class="token function">FloatingActionButton</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>&#x5927;&#x6740;&#x5668;&#xFF1A;Collection If &#x548C; Collection For</p>
<pre class="language-"><code class="lang-dart"><span class="token comment">// collection If</span>
Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">Row</span><span class="token punctuation">(</span>
    children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
      <span class="token function">IconButton</span><span class="token punctuation">(</span>icon<span class="token punctuation">:</span> <span class="token function">Icon</span><span class="token punctuation">(</span>Icons<span class="token punctuation">.</span>menu<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token function">Expanded</span><span class="token punctuation">(</span>child<span class="token punctuation">:</span> title<span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>isAndroid<span class="token punctuation">)</span>
        <span class="token function">IconButton</span><span class="token punctuation">(</span>icon<span class="token punctuation">:</span> <span class="token function">Icon</span><span class="token punctuation">(</span>Icons<span class="token punctuation">.</span>search<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<pre class="language-"><code class="lang-dart"><span class="token comment">// Collect For</span>
<span class="token keyword">var</span> command <span class="token operator">=</span> <span class="token punctuation">[</span>
  engineDartPath<span class="token punctuation">,</span>
  frontendServer<span class="token punctuation">,</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> root <span class="token keyword">in</span> fileSystemRoots<span class="token punctuation">)</span> <span class="token string">&quot;--filesystem-root=$root&quot;</span><span class="token punctuation">,</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> entryPoint <span class="token keyword">in</span> entryPoints<span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">fileExists</span><span class="token punctuation">(</span><span class="token string">&quot;lib/$entryPoint.json&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token string">&quot;lib/$entryPoint&quot;</span><span class="token punctuation">,</span>
  mainPath
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre>
<h2 id="flutter-&#x600E;&#x4E48;&#x5199;"><a name="flutter-&#x600E;&#x4E48;&#x5199;" class="anchor-navigation-ex-anchor" href="#flutter-&#x600E;&#x4E48;&#x5199;"><i class="fa fa-link" aria-hidden="true"></i></a>Flutter &#x600E;&#x4E48;&#x5199;</h2>
<p>&#x5230;&#x8FD9;&#x91CC;&#x7EC8;&#x4E8E;&#x5230;&#x6B63;&#x9898;&#x4E86;&#xFF0C;&#x719F;&#x6089; React &#x7684;&#x8BDD;&#xFF0C;&#x4F60;&#x4F1A;&#x53D1;&#x73B0;&#x5F02;&#x5E38;&#x7684;&#x719F;&#x6089;&#x3002;<kbd> UI=F(state)</kbd>
<img src="https://i.loli.net/2019/11/17/g9ke3ARsl2oj7rp.png" alt="3.jpg">
Flutter App &#x7684;&#x4E00;&#x5207;&#x4ECE; <kbd>lib/main.dart</kbd>&#x6587;&#x4EF6;&#x7684; main &#x51FD;&#x6570;&#x5F00;&#x59CB;&#xFF1A;</p>
<pre class="language-"><code class="lang-dart"><span class="token keyword">import</span> <span class="token string">&apos;package:flutter/material.dart&apos;</span><span class="token punctuation">;</span>

<span class="token keyword">void</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token function">runApp</span><span class="token punctuation">(</span><span class="token function">MyApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">MyApp</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token metadata symbol">@override</span>
  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">MaterialApp</span><span class="token punctuation">(</span>
      title<span class="token punctuation">:</span> <span class="token string">&apos;Welcome to Flutter&apos;</span><span class="token punctuation">,</span>
      home<span class="token punctuation">:</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span>
        appBar<span class="token punctuation">:</span> <span class="token function">AppBar</span><span class="token punctuation">(</span>
          title<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">&apos;Welcome to Flutter&apos;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
        body<span class="token punctuation">:</span> <span class="token function">Center</span><span class="token punctuation">(</span>
          child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">&apos;Hello World&apos;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Dart &#x7C7B; build &#x65B9;&#x6CD5;&#x8FD4;&#x56DE;&#x7684;&#x4FBF;&#x662F; Widget&#xFF0C;&#x5728; Flutter &#x4E2D;&#x4E00;&#x5207;&#x90FD;&#x662F; Widget&#xFF0C;&#x5305;&#x62EC;&#x4F46;&#x4E0D;&#x9650;&#x4E8E;</p>
<ul>
<li>&#x7ED3;&#x6784;&#x6027;&#x5143;&#x7D20;&#xFF0C;menu&#xFF0C;button &#x7B49;</li>
<li>&#x6837;&#x5F0F;&#x7C7B;&#x5143;&#x7D20;&#xFF0C;font&#xFF0C;color &#x7B49;</li>
<li>&#x5E03;&#x5C40;&#x7C7B;&#x5143;&#x7D20;&#xFF0C;padding&#xFF0C;margin &#x7B49;</li>
<li>&#x5BFC;&#x822A;</li>
<li>&#x624B;&#x52BF;</li>
</ul>
<p>Widget &#x662F; Dart &#x4E2D;&#x7279;&#x6B8A;&#x7684;&#x7C7B;&#xFF0C;&#x901A;&#x8FC7;&#x5B9E;&#x4F8B;&#x5316;(Dart &#x4E2D;new &#x662F;&#x53EF;&#x9009;&#x7684;)&#x76F8;&#x4E92;&#x5D4C;&#x5957;&#xFF0C;&#x4F60;&#x7684;&#x8FD9;&#x4E2A; App &#x5C31;&#x662F;&#x5F62;&#x5982;&#x4E0B;&#x56FE;&#x7684;&#x4E00;&#x9897;&#x7EC4;&#x4EF6;&#x6811;(Dart &#x5165;&#x53E3;&#x51FD;&#x6570;&#x7684;&#x6982;&#x5FF5;&#xFF0C; main.dart-&gt;main())&#x3002;
<img src="https://i.loli.net/2019/11/17/VO4inQazkTNhlEu.png" alt="4.jpg"></p>
<h3 id="widget-&#x5E03;&#x5C40;"><a name="widget-&#x5E03;&#x5C40;" class="anchor-navigation-ex-anchor" href="#widget-&#x5E03;&#x5C40;"><i class="fa fa-link" aria-hidden="true"></i></a>Widget &#x5E03;&#x5C40;</h3>
<blockquote>
<p>Flutter&#x4E2D;&#x4E07;&#x7269;&#x7686;Widget</p>
</blockquote>
<p>&#x6700;&#x5F00;&#x59CB;&#x8BF4;&#x8FC7; Flutter &#x5E03;&#x5C40;&#x601D;&#x8DEF;&#x6765;&#x81EA; CSS&#xFF0C;&#x800C; Flutter &#x4E2D;&#x4E00;&#x5207;&#x7686; Widget&#xFF0C;&#x56E0;&#x6B64;&#x6574;&#x4F53;&#x5E03;&#x5C40;&#x4E5F;&#x5F88;&#x7B80;&#x5355;&#xFF1A;</p>
<ul>
<li>&#x5BB9;&#x5668;&#x7EC4;&#x4EF6; Container</li>
<li><ul>
<li>decoration &#x88C5;&#x9970;&#x5C5E;&#x6027;&#xFF0C;&#x8BBE;&#x7F6E;&#x80CC;&#x666F;&#x8272;&#xFF0C;&#x80CC;&#x666F;&#x56FE;&#xFF0C;&#x8FB9;&#x6846;&#xFF0C;&#x5706;&#x89D2;&#xFF0C;&#x9634;&#x5F71;&#x548C;&#x6E10;&#x53D8;&#x7B49;</li>
<li>margin</li>
<li>padding</li>
<li>alignment</li>
<li>width</li>
<li>height</li>
</ul>
</li>
<li>Padding&#xFF0C;Center</li>
<li>Row,Column,Flex</li>
<li>Wrap, Flow &#x6D41;&#x5F0F;&#x5E03;&#x5C40;</li>
<li>stack&#xFF0C; z &#x8F74;&#x5E03;&#x5C40;</li>
<li>&#x3002;&#x3002;&#x3002;&#x3002;&#x3002;&#x3002;</li>
</ul>
<p>&#x5173;&#x4E8E;widget &#x66F4;&#x591A;&#x53EF;&#x4EE5;&#x67E5;&#x770B;&#x54B8;&#x9C7C;&#x56E2;&#x961F;&#x7684;<a href="https://www.yuque.com/xytech/flutter/hc0xq7" target="_blank">&#x6587;&#x7AE0;</a></p>
<p>Flutter &#x4E2D; Widget &#x53EF;&#x4EE5;&#x5206;&#x4E3A;&#x4E09;&#x7C7B;&#xFF0C;&#x5F62;&#x5982; React &#x4E2D;&#x201C;&#x5C55;&#x793A;&#x7EC4;&#x4EF6;&#x201D;&#x3001;&#x201C;&#x5BB9;&#x5668;&#x7EC4;&#x4EF6;&#x201D;&#xFF0C;&#x201C;context&#x201D;&#x3002;</p>
<h3 id="statelesswidget"><a name="statelesswidget" class="anchor-navigation-ex-anchor" href="#statelesswidget"><i class="fa fa-link" aria-hidden="true"></i></a>StatelessWidget</h3>
<p>&#x8FD9;&#x4E2A;&#x5C31;&#x662F; Flutter &#x4E2D;&#x7684;&#x201C;&#x5C55;&#x793A;&#x7EC4;&#x4EF6;&#x201D;&#xFF0C;&#x81EA;&#x8EAB;&#x4E0D;&#x4FDD;&#x5B58;&#x72B6;&#x6001;&#xFF0C;&#x5916;&#x90E8;&#x53C2;&#x6570;&#x53D8;&#x5316;&#x5C31;&#x9500;&#x6BC1;&#x91CD;&#x65B0;&#x521B;&#x5EFA;&#x3002;Flutter &#x5EFA;&#x8BAE;&#x5C3D;&#x91CF;&#x4F7F;&#x7528;&#x65E0;&#x72B6;&#x6001;&#x7684;&#x7EC4;&#x4EF6;&#x3002;</p>
<h3 id="statefulwidget"><a name="statefulwidget" class="anchor-navigation-ex-anchor" href="#statefulwidget"><i class="fa fa-link" aria-hidden="true"></i></a>StatefulWidget</h3>
<p>&#x72B6;&#x6001;&#x7EC4;&#x4EF6;&#x5C31;&#x662F;&#x7C7B;&#x4F3C;&#x4E8E; React &#x4E2D;&#x7684;&#x201C;&#x5BB9;&#x5668;&#x7EC4;&#x4EF6;&#x201D;&#x4E86;&#xFF0C;Flutter &#x4E2D;&#x72B6;&#x6001;&#x7EC4;&#x4EF6;&#x5199;&#x6CD5;&#x4F1A;&#x7A0D;&#x5FAE;&#x4E0D;&#x4E00;&#x6837;&#x3002;</p>
<pre class="language-"><code class="lang-dart"><span class="token keyword">class</span> <span class="token class-name">Counter</span> <span class="token keyword">extends</span> <span class="token class-name">StatefulWidget</span> <span class="token punctuation">{</span>
  <span class="token comment">// This class is the configuration for the state. It holds the</span>
  <span class="token comment">// values (in this case nothing) provided by the parent and used by the build</span>
  <span class="token comment">// method of the State. Fields in a Widget subclass are always marked &quot;final&quot;.</span>

  <span class="token metadata symbol">@override</span>
  _CounterState <span class="token function">createState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token function">_CounterState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">_CounterState</span> <span class="token keyword">extends</span> <span class="token class-name">State</span><span class="token operator">&lt;</span>Counter<span class="token operator">&gt;</span> <span class="token punctuation">{</span>
  int _counter <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>

  <span class="token keyword">void</span> <span class="token function">_increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// This call to setState tells the Flutter framework that</span>
      <span class="token comment">// something has changed in this State, which causes it to rerun</span>
      <span class="token comment">// the build method below so that the display can reflect the</span>
      <span class="token comment">// updated values. If you change _counter without calling</span>
      <span class="token comment">// setState(), then the build method won&apos;t be called again,</span>
      <span class="token comment">// and so nothing would appear to happen.</span>
      _counter<span class="token operator">++</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token metadata symbol">@override</span>
  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// This method is rerun every time setState is called, for instance</span>
    <span class="token comment">// as done by the _increment method above.</span>
    <span class="token comment">// The Flutter framework has been optimized to make rerunning</span>
    <span class="token comment">// build methods fast, so that you can just rebuild anything that</span>
    <span class="token comment">// needs updating rather than having to individually change</span>
    <span class="token comment">// instances of widgets.</span>
    <span class="token keyword">return</span> <span class="token function">Row</span><span class="token punctuation">(</span>
      children<span class="token punctuation">:</span> <span class="token operator">&lt;</span>Widget<span class="token operator">&gt;</span><span class="token punctuation">[</span>
        <span class="token function">RaisedButton</span><span class="token punctuation">(</span>
          onPressed<span class="token punctuation">:</span> _increment<span class="token punctuation">,</span>
          child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">&apos;Increment&apos;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">&apos;Count: $_counter&apos;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>&#x53EF;&#x4EE5;&#x770B;&#x5230; Flutter &#x4E2D;&#x76F4;&#x63A5;&#x4F7F;&#x7528;&#x4E86;&#x548C; React &#x4E2D;&#x540C;&#x540D;&#x7684; setState&#x65B9;&#x6CD5;&#xFF0C;&#x4E0D;&#x8FC7;&#x4E0D;&#x4F1A;&#x6709;&#x53D8;&#x91CF;&#x5408;&#x5E76;&#x7684;&#x4E1C;&#x897F;&#xFF0C;&#x5F53;&#x7136;&#x4E5F;&#x6709;<a href="https://segmentfault.com/a/1190000015211309" target="_blank">&#x751F;&#x547D;&#x5468;&#x671F;</a>&#x3002;</p>
<p><img src="https://i.loli.net/2019/11/17/bYhFOATfLr7eJ4N.png" alt="5.jpg"></p>
<p>&#x53EF;&#x4EE5;&#x770B;&#x5230;&#x4E00;&#x4E2A;&#x6709;&#x72B6;&#x6001;&#x7684;&#x7EC4;&#x4EF6;&#x9700;&#x8981;&#x4E24;&#x4E2A; Class&#xFF0C;&#x8FD9;&#x6837;&#x5199;&#x7684;&#x539F;&#x56E0;&#x5728;&#x4E8E;&#xFF0C;Flutter &#x4E2D; Widget &#x90FD;&#x662F; immmutable &#x7684;&#xFF0C;&#x72B6;&#x6001;&#x7EC4;&#x4EF6;&#x7684;&#x72B6;&#x6001;&#x4FDD;&#x5B58;&#x5728; State &#x4E2D;&#xFF0C;&#x7EC4;&#x4EF6;&#x4ECD;&#x7136;&#x6BCF;&#x6B21;&#x91CD;&#x65B0;&#x521B;&#x5EFA;&#xFF0C;Widget &#x5728;&#x8FD9;&#x91CC;&#x53EA;&#x662F;&#x4E00;&#x79CD;&#x5BF9;&#x7EC4;&#x4EF6;&#x7684;&#x63CF;&#x8FF0;&#xFF0C;Flutter &#x4F1A; diff &#x8F6C;&#x6362;&#x6210; Element&#xFF0C;&#x7136;&#x540E;&#x8F6C;&#x6362;&#x6210; RenderObject &#x624D;&#x6E32;&#x67D3;&#x3002;</p>
<p><img src="https://i.loli.net/2019/11/17/s7QS5zZN92LrPfV.jpg" alt="6.jpg"></p>
<p>Flutter Widget &#x66F4;&#x591A;&#x7684;&#x6E32;&#x67D3;&#x6D41;&#x7A0B;&#x53EF;&#x4EE5;&#x770B;<a href="https://www.yuque.com/xytech/flutter/tge705" target="_blank">&#x8FD9;&#x91CC;</a>&#x3002;</p>
<p>&#x5B9E;&#x9645;&#x4E0A; Widget &#x53EA;&#x662F;&#x4F5C;&#x4E3A;&#x7EC4;&#x4EF6;&#x7ED3;&#x6784;&#x4E00;&#x79CD;&#x63CF;&#x8FF0;&#xFF0C;&#x8FD8;&#x53EF;&#x4EE5;&#x5E26;&#x6765;&#x7684;&#x597D;&#x5904;&#x662F;&#xFF0C;&#x4F60;&#x53EF;&#x4EE5;&#x66F4;&#x65B9;&#x4FBF;&#x7684;&#x505A;&#x4E00;&#x4E9B;&#x4E3B;&#x9898;&#x6027;&#x7684;&#x7EC4;&#x4EF6;, Flutter &#x5B98;&#x65B9;&#x63D0;&#x4F9B;&#x7684;Material Components widgets&#x548C;Cupertino (iOS-style) widgets&#x8D28;&#x91CF;&#x5C31;&#x76F8;&#x5F53;&#x9AD8;&#xFF0C;&#x518D;&#x914D;&#x5408; Flutter &#x4E9A;&#x79D2;&#x7EA7;&#x7684;Hot Reload&#xFF0C;&#x5F00;&#x53D1;&#x4F53;&#x9A8C;&#x53EF;&#x4EE5;&#x8BF4;&#x633A;&#x4E0D;&#x9519;&#x7684;&#x3002;</p>
<h2 id="state-management"><a name="state-management" class="anchor-navigation-ex-anchor" href="#state-management"><i class="fa fa-link" aria-hidden="true"></i></a>State Management</h2>
<p>setState()&#x53EF;&#x4EE5;&#x5F88;&#x65B9;&#x4FBF;&#x7684;&#x7BA1;&#x7406;&#x7EC4;&#x4EF6;&#x5185;&#x7684;&#x6570;&#x636E;&#xFF0C;&#x4F46;&#x662F; Flutter &#x4E2D;&#x72B6;&#x6001;&#x540C;&#x6837;&#x662F;&#x4ECE;&#x4E0A;&#x5F80;&#x4E0B;&#x6D41;&#x8F6C;&#x7684;&#xFF0C;&#x56E0;&#x6B64;&#x4E5F;&#x4F1A;&#x9047;&#x5230;&#x548C; React &#x4E2D;&#x540C;&#x6837;&#x7684;&#x95EE;&#x9898;&#xFF0C;&#x5982;&#x679C;&#x7EC4;&#x4EF6;&#x6811;&#x592A;&#x6DF1;&#xFF0C;&#x9010;&#x5C42;&#x72B6;&#x6001;&#x521B;&#x5EFA;&#x5C31;&#x663E;&#x5F97;&#x5F88;&#x9EBB;&#x70E6;&#x4E86;&#xFF0C;&#x66F4;&#x4E0D;&#x8981;&#x8BF4;&#x4EE3;&#x7801;&#x7684;&#x6613;&#x8BFB;&#x548C;&#x6613;&#x7EF4;&#x62A4;&#x6027;&#x4E86;&#x3002;</p>
<h3 id="inheritedwidget"><a name="inheritedwidget" class="anchor-navigation-ex-anchor" href="#inheritedwidget"><i class="fa fa-link" aria-hidden="true"></i></a>InheritedWidget</h3>
<p>&#x540C;&#x6837; Flutter &#x4E5F;&#x6709;&#x4E2A; context&#x4E00;&#x6837;&#x7684;&#x4E1C;&#x897F;&#xFF0C;&#x90A3;&#x5C31;&#x662F; InheritedWidget&#xFF0C;&#x4F7F;&#x7528;&#x8D77;&#x6765;&#x4E5F;&#x5F88;&#x7B80;&#x5355;&#x3002;</p>
<pre class="language-"><code class="lang-dart"><span class="token keyword">class</span> <span class="token class-name">GlobalData</span> <span class="token keyword">extends</span> <span class="token class-name">InheritedWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">final</span> int count<span class="token punctuation">;</span>
  <span class="token function">GlobalData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>Key key<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>count<span class="token punctuation">,</span>Widget child<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">:</span><span class="token keyword">super</span><span class="token punctuation">(</span>key<span class="token punctuation">:</span>key<span class="token punctuation">,</span>child<span class="token punctuation">:</span>child<span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token metadata symbol">@override</span>
  bool <span class="token function">updateShouldNotify</span><span class="token punctuation">(</span>GlobalData oldWidget<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> oldWidget<span class="token punctuation">.</span>count <span class="token operator">!=</span> count<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">static</span> GlobalData <span class="token function">of</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> context<span class="token punctuation">.</span><span class="token function">inheritFromWidgetOfExactType</span><span class="token punctuation">(</span>GlobalData<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">MyApp</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token comment">// This widget is the root of your application.</span>
  <span class="token metadata symbol">@override</span>
  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">MaterialApp</span><span class="token punctuation">(</span>
      title<span class="token punctuation">:</span> <span class="token string">&apos;Flutter Demo&apos;</span><span class="token punctuation">,</span>
      theme<span class="token punctuation">:</span> <span class="token function">ThemeData</span><span class="token punctuation">(</span>
        primarySwatch<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>blue<span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
      home<span class="token punctuation">:</span> <span class="token function">MyHomePage</span><span class="token punctuation">(</span>title<span class="token punctuation">:</span> <span class="token string">&apos;Flutter Demo Home Page&apos;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">MyHomePage</span> <span class="token keyword">extends</span> <span class="token class-name">StatefulWidget</span> <span class="token punctuation">{</span>
  <span class="token function">MyHomePage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>Key key<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword">super</span><span class="token punctuation">(</span>key<span class="token punctuation">:</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">final</span> String title<span class="token punctuation">;</span>

  <span class="token metadata symbol">@override</span>
  _MyHomePageState <span class="token function">createState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token function">_MyHomePageState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">_MyHomePageState</span> <span class="token keyword">extends</span> <span class="token class-name">State</span><span class="token operator">&lt;</span>MyHomePage<span class="token operator">&gt;</span> <span class="token punctuation">{</span>
  int _counter <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>

  <span class="token keyword">void</span> <span class="token function">_incrementCounter</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      _counter<span class="token operator">++</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token metadata symbol">@override</span>
  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span>
      appBar<span class="token punctuation">:</span> <span class="token function">AppBar</span><span class="token punctuation">(</span>
        title<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span>widget<span class="token punctuation">.</span>title<span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
      body<span class="token punctuation">:</span> <span class="token function">GlobalData</span><span class="token punctuation">(</span>
        count<span class="token punctuation">:</span> _counter<span class="token punctuation">,</span>
        child<span class="token punctuation">:</span> <span class="token function">Center</span><span class="token punctuation">(</span>
          child<span class="token punctuation">:</span> <span class="token function">Column</span><span class="token punctuation">(</span>
            mainAxisAlignment<span class="token punctuation">:</span> MainAxisAlignment<span class="token punctuation">.</span>center<span class="token punctuation">,</span>
            children<span class="token punctuation">:</span> <span class="token operator">&lt;</span>Widget<span class="token operator">&gt;</span><span class="token punctuation">[</span>
              <span class="token function">Text</span><span class="token punctuation">(</span>
                <span class="token string">&apos;You have pushed the button this many times:&apos;</span><span class="token punctuation">,</span>
              <span class="token punctuation">)</span><span class="token punctuation">,</span>
              <span class="token function">Text</span><span class="token punctuation">(</span>
                <span class="token string">&apos;$_counter&apos;</span><span class="token punctuation">,</span>
                style<span class="token punctuation">:</span> Theme<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">.</span>textTheme<span class="token punctuation">.</span>display1<span class="token punctuation">,</span>
              <span class="token punctuation">)</span><span class="token punctuation">,</span>
              <span class="token function">Body</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
              <span class="token function">Body2</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
      floatingActionButton<span class="token punctuation">:</span> <span class="token function">FloatingActionButton</span><span class="token punctuation">(</span>
        onPressed<span class="token punctuation">:</span> _incrementCounter<span class="token punctuation">,</span>
        tooltip<span class="token punctuation">:</span> <span class="token string">&apos;Increment&apos;</span><span class="token punctuation">,</span>
        child<span class="token punctuation">:</span> <span class="token function">Icon</span><span class="token punctuation">(</span>Icons<span class="token punctuation">.</span>add<span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Body</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token metadata symbol">@override</span>
  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    GlobalData globalData <span class="token operator">=</span> GlobalData<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token function">Text</span><span class="token punctuation">(</span>globalData<span class="token punctuation">.</span>count<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Body2</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token metadata symbol">@override</span>
  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// TODO: implement build</span>
    GlobalData globalData <span class="token operator">=</span> GlobalData<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token function">Text</span><span class="token punctuation">(</span>globalData<span class="token punctuation">.</span>count<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</code></pre>
<p>&#x5177;&#x4F53;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#x53EF;&#x4EE5;&#x53C2;&#x8003;<a href="https://loveky.github.io/2018/07/18/how-flutter-inheritedwidget-works/" target="_blank">&#x8FD9;&#x91CC;</a>&#xFF0C;&#x4E0D;&#x8FC7; Google &#x5C01;&#x88C5;&#x4E86;&#x4E00;&#x4E2A;&#x66F4;&#x4E3A;&#x4E0A;&#x5C42;&#x7684;&#x5E93;<a href="https://pub.dev/packages/provider" target="_blank">provider</a>&#xFF0C;&#x5177;&#x4F53;&#x4F7F;&#x7528;&#x53EF;&#x4EE5;&#x770B;<a href="https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple" target="_blank">&#x8FD9;&#x91CC;</a>&#x3002;</p>
<h3 id="bloc"><a name="bloc" class="anchor-navigation-ex-anchor" href="#bloc"><i class="fa fa-link" aria-hidden="true"></i></a>BlOC</h3>
<p><a href="https://link.juejin.im/?target=https%3A%2F%2Fmedium.com%2Fflutterpub%2Farchitecting-your-flutter-project-bd04e144a8f1" target="_blank">BlOC</a>&#x662F; Flutter team &#x63D0;&#x51FA;&#x5EFA;&#x8BAE;&#x7684;&#x53E6;&#x4E00;&#x79CD;&#x66F4;&#x9AD8;&#x7EA7;&#x7684;&#x6570;&#x636E;&#x7EC4;&#x7EC7;&#x65B9;&#x5F0F;&#x3002;&#x7B80;&#x5355;&#x6765;&#x8BF4;&#xFF1A;</p>
<h4 id="bloc--inheritedwidget--rxdartstream"><a name="bloc--inheritedwidget--rxdartstream" class="anchor-navigation-ex-anchor" href="#bloc--inheritedwidget--rxdartstream"><i class="fa fa-link" aria-hidden="true"></i></a>Bloc = InheritedWidget + RxDart(Stream)</h4>
<p>Dart &#x8BED;&#x8A00;&#x4E2D;&#x5185;&#x7F6E;&#x4E86; Steam&#xFF0C;Stream ~= Observable&#xFF0C;&#x914D;&#x5408;<a href="https://pub.dev/packages/rxdart" target="_blank">RxDart</a>, &#x7136;&#x540E;&#x52A0;&#x4E0A; StreamBuilder&#x4F1A;&#x662F;&#x4E00;&#x79CD;&#x5F02;&#x5E38;&#x5F3A;&#x5927;&#x548C;&#x81EA;&#x7531;&#x7684;&#x6A21;&#x5F0F;&#x3002;</p>
<pre class="language-"><code class="lang-dart"><span class="token keyword">class</span> <span class="token class-name">GlobalData</span> <span class="token keyword">extends</span> <span class="token class-name">InheritedWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">final</span> int count<span class="token punctuation">;</span>
  <span class="token keyword">final</span> Stream<span class="token operator">&lt;</span>String<span class="token operator">&gt;</span> timeInterval$ <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Stream<span class="token punctuation">.</span>periodic</span><span class="token punctuation">(</span><span class="token function">Duration</span><span class="token punctuation">(</span>seconds<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>time<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token keyword">new</span> <span class="token class-name">DateTime<span class="token punctuation">.</span>now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">GlobalData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>Key key<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>count<span class="token punctuation">,</span>Widget child<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">:</span><span class="token keyword">super</span><span class="token punctuation">(</span>key<span class="token punctuation">:</span>key<span class="token punctuation">,</span>child<span class="token punctuation">:</span>child<span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token metadata symbol">@override</span>
  bool <span class="token function">updateShouldNotify</span><span class="token punctuation">(</span>GlobalData oldWidget<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> oldWidget<span class="token punctuation">.</span>count <span class="token operator">!=</span> count<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">static</span> GlobalData <span class="token function">of</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> context<span class="token punctuation">.</span><span class="token function">inheritFromWidgetOfExactType</span><span class="token punctuation">(</span>GlobalData<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">TimerView</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>

  <span class="token metadata symbol">@override</span>
  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    GlobalData globalData <span class="token operator">=</span> GlobalData<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token function">StreamBuilder</span><span class="token punctuation">(</span>
        stream<span class="token punctuation">:</span> globalData<span class="token punctuation">.</span>timeInterval$<span class="token punctuation">,</span>
        builder<span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">,</span> snapshot<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">return</span> <span class="token function">Text</span><span class="token punctuation">(</span>snapshot<span class="token operator">?</span><span class="token punctuation">.</span>data <span class="token operator">?</span><span class="token operator">?</span> <span class="token string">&apos;&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>&#x5F53;&#x7136; Bloc &#x7684;&#x95EE;&#x9898;&#x5728;&#x4E8E;</p>
<ul>
<li>&#x5B66;&#x4E60;&#x6210;&#x672C;&#x7565;&#x9AD8;&#xFF0C;Rx &#x7684;&#x6982;&#x5FF5;&#x8981;&#x5403;&#x900F;&#xFF0C;&#x4E0D;&#x7136;&#x4F60;&#x4F1A;&#x6293;&#x72C2;</li>
<li>&#x81EA;&#x7531;&#x5E26;&#x6765;&#x7684;&#x95EE;&#x9898;&#x662F;&#xFF0C;&#x53EF;&#x80FD;&#x4EE3;&#x7801;&#x4E0D;&#x5982; Redux &#x7C7B;&#x7684;&#x89C4;&#x6574;&#x3002;</li>
</ul>
<p>&#x4ECA;&#x5E74; Apple &#x4E5F;&#x62E5;&#x62B1;&#x4E86;&#x54CD;&#x5E94;&#x5F0F;&#xFF0C;Combine(Rx like) + SwiftUI &#x4E5F;&#x57FA;&#x672C;&#x7B49;&#x4E8E; Bloc &#x4E86;&#x3002;
&#x6240;&#x4EE5;&#xFF0C;Rx &#x8FD8;&#x662F;&#x8981;&#x8D76;&#x7D27;&#x5B66;&#x8D77;&#x6765;
&#x9664;&#x53BB; Bloc&#xFF0C;Flutter &#x4E2D;&#x8FD8;&#x662F;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x5176;&#x4ED6;&#x7684;&#x65B9;&#x6848;&#xFF0C;&#x8B6C;&#x5982;&#xFF1A;</p>
<ul>
<li><a href="https://pub.dev/packages/flutter_redux" target="_blank">Flutter Redux</a></li>
<li>&#x963F;&#x91CC;&#x95F2;&#x9C7C;&#x7684;<a href="https://github.com/alibaba/fish-redux" target="_blank">Fish Redux</a>&#xFF0C;&#x636E;&#x8BF4;&#x6027;&#x80FD;&#x5F88;&#x597D;&#x3002;</li>
<li><a href="https://mobx.pub/" target="_blank">Mobx</a></li>
<li>&#x2026;&#x2026;</li>
</ul>
<p>&#x5C55;&#x5F00;&#x6765;&#x8BF4;&#x73B0;&#x5728;&#x7684;&#x524D;&#x7AEF;&#x5F00;&#x53D1;&#x4F7F;&#x7528;&#x5F3A;&#x5927;&#x7684;&#x6846;&#x67B6;&#x9875;&#x9762;&#x7EC4;&#x88C5;&#x5DF2;&#x7ECF;&#x4E0D;&#x662F;&#x96BE;&#x70B9;&#x4E86;&#x3002;&#x5F00;&#x53D1;&#x7684;&#x96BE;&#x70B9;&#x5728;&#x4E8E;&#x5982;&#x4F55;&#x7EC4;&#x5408;&#x5BCC;&#x4EA4;&#x4E92;&#x6240;&#x9700;&#x7684;&#x6570;&#x636E;&#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x4E0A;&#x9762;&#x56FE;&#x4E2D;&#x7684; state&#x90E8;&#x5206;&#x3002;</p>
<p>&#x66F4;&#x5177;&#x4F53;&#x6765;&#x8BF4;&#xFF0C;&#x662F;&#x600E;&#x4E48;&#x4F18;&#x96C5;&#xFF0C;&#x9AD8;&#x6548;&#xFF0C;&#x6613;&#x7EF4;&#x62A4;&#x5730;&#x5904;&#x7406;&#x77ED;&#x6682;&#x6570;&#x636E;(ephemeral state) setState()&#x548C;&#x9700;&#x8981;&#x5171;&#x4EAB;&#x7684; App State &#x7684;&#x95EE;&#x9898;&#xFF0C;&#x8FD9;&#x662F;&#x4E2A;&#x5DE5;&#x7A0B;&#x6027;&#x7684;&#x95EE;&#x9898;&#xFF0C;&#x4F46;&#x5F80;&#x5F80;&#x4E5F;&#x662F;&#x65E5;&#x5E38;&#x5F00;&#x53D1;&#x6700;&#x96BE;&#x7684;&#x4E8B;&#x60C5;&#x4E86;.</p>
<p>&#x5230;&#x8FD9;&#x91CC;&#xFF0C;&#x4E3B;&#x8981;&#x7684;&#x90E8;&#x5206;&#x5DF2;&#x7ECF;&#x603B;&#x7ED3;&#x5B8C;&#x4E86;&#xFF0C;&#x6709;&#x8FD9;&#x4E9B;&#x5DF2;&#x7ECF;&#x53EF;&#x4EE5;&#x5F00;&#x53D1;&#x51FA;&#x4E00;&#x4E2A;&#x4E0D;&#x9519;&#x7684; App &#x4E86;&#x3002;</p>
<h2 id="&#x4E0E;&#x540E;&#x7AEF;&#x7684;&#x901A;&#x4FE1;"><a name="&#x4E0E;&#x540E;&#x7AEF;&#x7684;&#x901A;&#x4FE1;" class="anchor-navigation-ex-anchor" href="#&#x4E0E;&#x540E;&#x7AEF;&#x7684;&#x901A;&#x4FE1;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4E0E;&#x540E;&#x7AEF;&#x7684;&#x901A;&#x4FE1;</h2>
<h3 id="1-&#x901A;&#x8FC7;httpclient&#x53D1;&#x8D77;http&#x8BF7;&#x6C42;"><a name="1-&#x901A;&#x8FC7;httpclient&#x53D1;&#x8D77;http&#x8BF7;&#x6C42;" class="anchor-navigation-ex-anchor" href="#1-&#x901A;&#x8FC7;httpclient&#x53D1;&#x8D77;http&#x8BF7;&#x6C42;"><i class="fa fa-link" aria-hidden="true"></i></a>1 &#x901A;&#x8FC7;HttpClient&#x53D1;&#x8D77;HTTP&#x8BF7;&#x6C42;</h3>
<p>Dart IO&#x5E93;&#x4E2D;&#x63D0;&#x4F9B;&#x4E86;&#x7528;&#x4E8E;&#x53D1;&#x8D77;Http&#x8BF7;&#x6C42;&#x7684;&#x4E00;&#x4E9B;&#x7C7B;&#xFF0C;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x4F7F;&#x7528;HttpClient&#x6765;&#x53D1;&#x8D77;&#x8BF7;&#x6C42;&#x3002;&#x4F7F;&#x7528;HttpClient&#x53D1;&#x8D77;&#x8BF7;&#x6C42;&#x5206;&#x4E3A;&#x4E94;&#x6B65;&#xFF1A;</p>
<ul>
<li>&#x521B;&#x5EFA;&#x4E00;&#x4E2A;HttpClient&#xFF1A;</li>
</ul>
<pre class="language-"><code class="lang-dart"> HttpClient httpClient <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">HttpClient</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<ul>
<li>&#x6253;&#x5F00;Http&#x8FDE;&#x63A5;&#xFF0C;&#x8BBE;&#x7F6E;&#x8BF7;&#x6C42;&#x5934;&#xFF1A;</li>
</ul>
<pre class="language-"><code class="lang-dart">HttpClientRequest request <span class="token operator">=</span> <span class="token keyword">await</span> httpClient<span class="token punctuation">.</span><span class="token function">getUrl</span><span class="token punctuation">(</span>uri<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>&#x8FD9;&#x4E00;&#x6B65;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x4EFB;&#x610F;Http Method&#xFF0C;&#x5982;httpClient.post(...)&#x3001;httpClient.delete(...)&#x7B49;&#x3002;&#x5982;&#x679C;&#x5305;&#x542B;Query&#x53C2;&#x6570;&#xFF0C;&#x53EF;&#x4EE5;&#x5728;&#x6784;&#x5EFA;uri&#x65F6;&#x6DFB;&#x52A0;&#xFF0C;&#x5982;&#xFF1A;</p>
<pre class="language-"><code class="lang-dart">Uri uri<span class="token operator">=</span><span class="token function">Uri</span><span class="token punctuation">(</span>scheme<span class="token punctuation">:</span> <span class="token string">&quot;https&quot;</span><span class="token punctuation">,</span> host<span class="token punctuation">:</span> <span class="token string">&quot;flutterchina.club&quot;</span><span class="token punctuation">,</span> queryParameters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;xx&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;xx&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;yy&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;dd&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>&#x901A;&#x8FC7;HttpClientRequest&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x8BF7;&#x6C42;header&#xFF0C;&#x5982;&#xFF1A;</p>
<pre class="language-"><code class="lang-dart">request<span class="token punctuation">.</span>headers<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">&quot;user-agent&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;test&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>&#x5982;&#x679C;&#x662F;post&#x6216;put&#x7B49;&#x53EF;&#x4EE5;&#x643A;&#x5E26;&#x8BF7;&#x6C42;&#x4F53;&#x65B9;&#x6CD5;&#xFF0C;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;HttpClientRequest&#x5BF9;&#x8C61;&#x53D1;&#x9001;request body&#xFF0C;&#x5982;&#xFF1A;</p>
<pre class="language-"><code class="lang-dart">String payload<span class="token operator">=</span><span class="token string">&quot;...&quot;</span><span class="token punctuation">;</span>
request<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>utf8<span class="token punctuation">.</span><span class="token function">encode</span><span class="token punctuation">(</span>payload<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
<span class="token comment">//request.addStream(_inputStream); //&#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x6DFB;&#x52A0;&#x8F93;&#x5165;&#x6D41;</span>
</code></pre>
<ul>
<li>&#x7B49;&#x5F85;&#x8FDE;&#x63A5;&#x670D;&#x52A1;&#x5668;&#xFF1A;</li>
</ul>
<pre class="language-"><code class="lang-dart">HttpClientResponse response <span class="token operator">=</span> <span class="token keyword">await</span> request<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>&#x8FD9;&#x4E00;&#x6B65;&#x5B8C;&#x6210;&#x540E;&#xFF0C;&#x8BF7;&#x6C42;&#x4FE1;&#x606F;&#x5C31;&#x5DF2;&#x7ECF;&#x53D1;&#x9001;&#x7ED9;&#x670D;&#x52A1;&#x5668;&#x4E86;&#xFF0C;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;HttpClientResponse&#x5BF9;&#x8C61;&#xFF0C;&#x5B83;&#x5305;&#x542B;&#x54CD;&#x5E94;&#x5934;&#xFF08;header&#xFF09;&#x548C;&#x54CD;&#x5E94;&#x6D41;(&#x54CD;&#x5E94;&#x4F53;&#x7684;Stream)&#xFF0C;&#x63A5;&#x4E0B;&#x6765;&#x5C31;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x8BFB;&#x53D6;&#x54CD;&#x5E94;&#x6D41;&#x6765;&#x83B7;&#x53D6;&#x54CD;&#x5E94;&#x5185;&#x5BB9;&#x3002;</p>
<ul>
<li>&#x8BFB;&#x53D6;&#x54CD;&#x5E94;&#x5185;&#x5BB9;&#xFF1A;</li>
</ul>
<pre class="language-"><code class="lang-dart">String responseBody <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">transform</span><span class="token punctuation">(</span>utf8<span class="token punctuation">.</span>decoder<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>&#x6211;&#x4EEC;&#x901A;&#x8FC7;&#x8BFB;&#x53D6;&#x54CD;&#x5E94;&#x6D41;&#x6765;&#x83B7;&#x53D6;&#x670D;&#x52A1;&#x5668;&#x8FD4;&#x56DE;&#x7684;&#x6570;&#x636E;&#xFF0C;&#x5728;&#x8BFB;&#x53D6;&#x65F6;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x7F16;&#x7801;&#x683C;&#x5F0F;&#xFF0C;&#x8FD9;&#x91CC;&#x662F;utf8&#x3002;</p>
<ul>
<li>&#x8BF7;&#x6C42;&#x7ED3;&#x675F;&#xFF0C;&#x5173;&#x95ED;HttpClient&#xFF1A;</li>
</ul>
<pre class="language-"><code class="lang-dart">httpClient<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>&#x5173;&#x95ED;client&#x540E;&#xFF0C;&#x901A;&#x8FC7;&#x8BE5;client&#x53D1;&#x8D77;&#x7684;&#x6240;&#x6709;&#x8BF7;&#x6C42;&#x90FD;&#x4F1A;&#x4E2D;&#x6B62;&#x3002;</p>
<h3 id="2http&#x8BF7;&#x6C42;-dio-http&#x5E93;"><a name="2http&#x8BF7;&#x6C42;-dio-http&#x5E93;" class="anchor-navigation-ex-anchor" href="#2http&#x8BF7;&#x6C42;-dio-http&#x5E93;"><i class="fa fa-link" aria-hidden="true"></i></a>2.Http&#x8BF7;&#x6C42;-Dio http&#x5E93;</h3>
<p>&#x901A;&#x8FC7;&#x4E0A;&#x4E00;&#x8282;&#x4ECB;&#x7ECD;&#xFF0C;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x53D1;&#x73B0;&#x76F4;&#x63A5;&#x4F7F;&#x7528;HttpClient&#x53D1;&#x8D77;&#x7F51;&#x7EDC;&#x8BF7;&#x6C42;&#x662F;&#x6BD4;&#x8F83;&#x9EBB;&#x70E6;&#x7684;&#xFF0C;&#x5F88;&#x591A;&#x4E8B;&#x60C5;&#x5F97;&#x6211;&#x4EEC;&#x624B;&#x52A8;&#x5904;&#x7406;&#xFF0C;&#x5982;&#x679C;&#x518D;&#x6D89;&#x53CA;&#x5230;&#x6587;&#x4EF6;&#x4E0A;&#x4F20;/&#x4E0B;&#x8F7D;&#x3001;Cookie&#x7BA1;&#x7406;&#x7B49;&#x5C31;&#x4F1A;&#x975E;&#x5E38;&#x7E41;&#x7410;&#x3002;&#x5E78;&#x8FD0;&#x7684;&#x662F;&#xFF0C;Dart&#x793E;&#x533A;&#x6709;&#x4E00;&#x4E9B;&#x7B2C;&#x4E09;&#x65B9;http&#x8BF7;&#x6C42;&#x5E93;&#xFF0C;&#x7528;&#x5B83;&#x4EEC;&#x6765;&#x53D1;&#x8D77;http&#x8BF7;&#x6C42;&#x5C06;&#x4F1A;&#x7B80;&#x5355;&#x7684;&#x591A;&#xFF0C;&#x672C;&#x8282;&#x6211;&#x4EEC;&#x4ECB;&#x7ECD;&#x4E00;&#x4E0B;&#x76EE;&#x524D;&#x4EBA;&#x6C14;&#x8F83;&#x9AD8;&#x7684;<a href="https://github.com/flutterchina/dio" target="_blank">dio</a>&#x5E93;&#x3002;</p>
<blockquote>
<p>dio&#x662F;&#x4E00;&#x4E2A;&#x5F3A;&#x5927;&#x7684;Dart Http&#x8BF7;&#x6C42;&#x5E93;&#xFF0C;&#x652F;&#x6301;Restful API&#x3001;FormData&#x3001;&#x62E6;&#x622A;&#x5668;&#x3001;&#x8BF7;&#x6C42;&#x53D6;&#x6D88;&#x3001;Cookie&#x7BA1;&#x7406;&#x3001;&#x6587;&#x4EF6;&#x4E0A;&#x4F20;/&#x4E0B;&#x8F7D;&#x3001;&#x8D85;&#x65F6;&#x7B49;&#x3002;dio&#x7684;&#x4F7F;&#x7528;&#x65B9;&#x5F0F;&#x968F;&#x7740;&#x5176;&#x7248;&#x672C;&#x5347;&#x7EA7;&#x53EF;&#x80FD;&#x4F1A;&#x53D1;&#x751F;&#x53D8;&#x5316;&#xFF0C;&#x5982;&#x679C;&#x672C;&#x8282;&#x6240;&#x8FF0;&#x5185;&#x5BB9;&#x548C;dio&#x5B98;&#x65B9;&#x6709;&#x5DEE;&#x5F02;&#xFF0C;&#x8BF7;&#x4EE5;dio&#x5B98;&#x65B9;&#x6587;&#x6863;&#x4E3A;&#x51C6;&#x3002;</p>
</blockquote>
<h4 id="&#x5F15;&#x5165;"><a name="&#x5F15;&#x5165;" class="anchor-navigation-ex-anchor" href="#&#x5F15;&#x5165;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x5F15;&#x5165;</h4>
<p>&#x5F15;&#x5165;dio:</p>
<pre class="language-"><code class="lang-dart">dependencies<span class="token punctuation">:</span>
  dio<span class="token punctuation">:</span> <span class="token operator">^</span>x<span class="token punctuation">.</span>x<span class="token punctuation">.</span>x #&#x8BF7;&#x4F7F;&#x7528;pub&#x4E0A;&#x7684;&#x6700;&#x65B0;&#x7248;&#x672C;
</code></pre>
<p>&#x5BFC;&#x5165;&#x5E76;&#x521B;&#x5EFA;dio&#x5B9E;&#x4F8B;&#xFF1A;</p>
<pre class="language-"><code class="lang-dart"><span class="token keyword">import</span> <span class="token string">&apos;package:dio/dio.dart&apos;</span><span class="token punctuation">;</span>
Dio dio <span class="token operator">=</span>  <span class="token function">Dio</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>&#x63A5;&#x4E0B;&#x6765;&#x5C31;&#x53EF;&#x4EE5;&#x901A;&#x8FC7; dio&#x5B9E;&#x4F8B;&#x6765;&#x53D1;&#x8D77;&#x7F51;&#x7EDC;&#x8BF7;&#x6C42;&#x4E86;&#xFF0C;&#x6CE8;&#x610F;&#xFF0C;&#x4E00;&#x4E2A;dio&#x5B9E;&#x4F8B;&#x53EF;&#x4EE5;&#x53D1;&#x8D77;&#x591A;&#x4E2A;http&#x8BF7;&#x6C42;&#xFF0C;&#x4E00;&#x822C;&#x6765;&#x8BF4;&#xFF0C;APP&#x53EA;&#x6709;&#x4E00;&#x4E2A;http&#x6570;&#x636E;&#x6E90;&#x65F6;&#xFF0C;dio&#x5E94;&#x8BE5;&#x4F7F;&#x7528;&#x5355;&#x4F8B;&#x6A21;&#x5F0F;&#x3002;</p>
<blockquote>
<p>GET&#x8BF7;&#x6C42;</p>
</blockquote>
<pre class="language-"><code class="lang-dart">Response response<span class="token punctuation">;</span>
response<span class="token operator">=</span><span class="token keyword">await</span> dio<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">&quot;/test?id=12&amp;name=wendu&quot;</span><span class="token punctuation">)</span>
<span class="token function">print</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>&#x5E26;&#x53C2;&#x6570;</p>
<pre class="language-"><code class="lang-dart">response<span class="token operator">=</span><span class="token keyword">await</span> dio<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">&quot;/test&quot;</span><span class="token punctuation">,</span>queryParameters<span class="token punctuation">:</span><span class="token punctuation">{</span><span class="token string">&quot;id&quot;</span><span class="token punctuation">:</span><span class="token number">12</span><span class="token punctuation">,</span><span class="token string">&quot;name&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;wendu&quot;</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token function">print</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>&#x591A;&#x4E2A;&#x5E76;&#x53D1;&#x8BF7;&#x6C42;</p>
<pre class="language-"><code class="lang-dart">response<span class="token operator">=</span> <span class="token keyword">await</span> Future<span class="token punctuation">.</span><span class="token function">wait</span><span class="token punctuation">(</span><span class="token punctuation">[</span>dio<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">&quot;/info&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>dio<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">&quot;/token&quot;</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>&#x4E0B;&#x8F7D;&#x6587;&#x4EF6;:</p>
<pre class="language-"><code class="lang-dart">response<span class="token operator">=</span><span class="token keyword">await</span> dio<span class="token punctuation">.</span><span class="token function">download</span><span class="token punctuation">(</span><span class="token string">&quot;https://www.google.com/&quot;</span><span class="token punctuation">,</span>_savePath<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>&#x53D1;&#x9001; FormData:</p>
<pre class="language-"><code class="lang-dart">FormData formData <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FormData<span class="token punctuation">.</span>from</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
   <span class="token string">&quot;name&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;wendux&quot;</span><span class="token punctuation">,</span>
   <span class="token string">&quot;age&quot;</span><span class="token punctuation">:</span> <span class="token number">25</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
response <span class="token operator">=</span> <span class="token keyword">await</span> dio<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">&quot;/info&quot;</span><span class="token punctuation">,</span> data<span class="token punctuation">:</span> formData<span class="token punctuation">)</span>
</code></pre>
<p>&#x6848;&#x4F8B;</p>
<p>&#x6211;&#x4EEC;&#x901A;&#x8FC7;Github&#x5F00;&#x653E;&#x7684;API&#x6765;&#x8BF7;&#x6C42;flutterchina&#x7EC4;&#x7EC7;&#x4E0B;&#x7684;&#x6240;&#x6709;&#x516C;&#x5F00;&#x7684;&#x5F00;&#x6E90;&#x9879;&#x76EE;&#xFF0C;&#x5B9E;&#x73B0;&#xFF1A;</p>
<ul>
<li>&#x5728;&#x8BF7;&#x6C42;&#x9636;&#x6BB5;&#x5F39;&#x51FA;loading</li>
<li><p>&#x8BF7;&#x6C42;&#x7ED3;&#x675F;&#x540E;&#xFF0C;&#x5982;&#x679C;&#x8BF7;&#x6C42;&#x5931;&#x8D25;&#xFF0C;&#x5219;&#x5C55;&#x793A;&#x9519;&#x8BEF;&#x4FE1;&#x606F;&#xFF1B;&#x5982;&#x679C;&#x6210;&#x529F;&#xFF0C;&#x5219;&#x5C06;&#x9879;&#x76EE;&#x540D;&#x79F0;&#x5217;&#x8868;&#x5C55;&#x793A;&#x51FA;&#x6765;&#x3002;
&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre class="language-"><code class="lang-dart"><span class="token keyword">class</span> <span class="token class-name">_FutureBuilderRouteState</span> <span class="token keyword">extends</span> <span class="token class-name">State</span><span class="token operator">&lt;</span>FutureBuilderRoute<span class="token operator">&gt;</span> <span class="token punctuation">{</span>
Dio _dio <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Dio</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token metadata symbol">@override</span>
Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>

  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
    alignment<span class="token punctuation">:</span> Alignment<span class="token punctuation">.</span>center<span class="token punctuation">,</span>
    child<span class="token punctuation">:</span> <span class="token function">FutureBuilder</span><span class="token punctuation">(</span>
        future<span class="token punctuation">:</span> _dio<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">&quot;https://api.github.com/orgs/flutterchina/repos&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        builder<span class="token punctuation">:</span> <span class="token punctuation">(</span>BuildContext context<span class="token punctuation">,</span> AsyncSnapshot snapshot<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token comment">//&#x8BF7;&#x6C42;&#x5B8C;&#x6210;</span>
          <span class="token keyword">if</span> <span class="token punctuation">(</span>snapshot<span class="token punctuation">.</span>connectionState <span class="token operator">==</span> ConnectionState<span class="token punctuation">.</span>done<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            Response response <span class="token operator">=</span> snapshot<span class="token punctuation">.</span>data<span class="token punctuation">;</span>
            <span class="token comment">//&#x53D1;&#x751F;&#x9519;&#x8BEF;</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>snapshot<span class="token punctuation">.</span>hasError<span class="token punctuation">)</span> <span class="token punctuation">{</span>
              <span class="token keyword">return</span> <span class="token function">Text</span><span class="token punctuation">(</span>snapshot<span class="token punctuation">.</span>error<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token comment">//&#x8BF7;&#x6C42;&#x6210;&#x529F;&#xFF0C;&#x901A;&#x8FC7;&#x9879;&#x76EE;&#x4FE1;&#x606F;&#x6784;&#x5EFA;&#x7528;&#x4E8E;&#x663E;&#x793A;&#x9879;&#x76EE;&#x540D;&#x79F0;&#x7684;ListView</span>
            <span class="token keyword">return</span> <span class="token function">ListView</span><span class="token punctuation">(</span>
              children<span class="token punctuation">:</span> response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>map<span class="token operator">&lt;</span>Widget<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span>
                  <span class="token function">ListTile</span><span class="token punctuation">(</span>title<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span>e<span class="token punctuation">[</span><span class="token string">&quot;full_name&quot;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
              <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span>
          <span class="token comment">//&#x8BF7;&#x6C42;&#x672A;&#x5B8C;&#x6210;&#x65F6;&#x5F39;&#x51FA;loading</span>
          <span class="token keyword">return</span> <span class="token function">CircularProgressIndicator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</li>
</ul>
<h2 id="&#x6D4B;&#x8BD5;"><a name="&#x6D4B;&#x8BD5;" class="anchor-navigation-ex-anchor" href="#&#x6D4B;&#x8BD5;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x6D4B;&#x8BD5;</h2>
<p>Flutter debugger&#xFF0C;&#x6D4B;&#x8BD5;&#x90FD;&#x662F;&#x51FA;&#x573A;&#x81EA;&#x5E26;&#xFF0C;&#x7528;&#x8D77;&#x6765;&#x4E5F;&#x4E0D;&#x96BE;&#x3002;</p>
<pre class="language-"><code class="lang-dart"><span class="token comment">// &#x6D4B;&#x8BD5;&#x5728;/test/&#x76EE;&#x5F55;&#x4E0B;&#x9762;</span>
<span class="token keyword">void</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

  <span class="token function">testWidgets</span><span class="token punctuation">(</span><span class="token string">&apos;Counter increments smoke test&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>WidgetTester tester<span class="token punctuation">)</span> <span class="token keyword">async</span> <span class="token punctuation">{</span>
    <span class="token comment">// Build our app and trigger a frame.</span>
    <span class="token keyword">await</span> tester<span class="token punctuation">.</span><span class="token function">pumpWidget</span><span class="token punctuation">(</span><span class="token function">MyApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">// Verify that our counter starts at 0.</span>
    <span class="token function">expect</span><span class="token punctuation">(</span>find<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string">&apos;0&apos;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> findsOneWidget<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">expect</span><span class="token punctuation">(</span>find<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string">&apos;1&apos;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> findsNothing<span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">// Tap the &apos;+&apos; icon and trigger a frame.</span>
    <span class="token keyword">await</span> tester<span class="token punctuation">.</span><span class="token function">tap</span><span class="token punctuation">(</span>find<span class="token punctuation">.</span><span class="token function">byIcon</span><span class="token punctuation">(</span>Icons<span class="token punctuation">.</span>add<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">await</span> tester<span class="token punctuation">.</span><span class="token function">pump</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">// Verify that our counter has incremented.</span>
    <span class="token function">expect</span><span class="token punctuation">(</span>find<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string">&apos;0&apos;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> findsNothing<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">expect</span><span class="token punctuation">(</span>find<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string">&apos;1&apos;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> findsOneWidget<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<h2 id="&#x5305;&#x7BA1;&#x7406;&#xFF0C;&#x8D44;&#x6E90;&#x7BA1;&#x7406;"><a name="&#x5305;&#x7BA1;&#x7406;&#xFF0C;&#x8D44;&#x6E90;&#x7BA1;&#x7406;" class="anchor-navigation-ex-anchor" href="#&#x5305;&#x7BA1;&#x7406;&#xFF0C;&#x8D44;&#x6E90;&#x7BA1;&#x7406;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x5305;&#x7BA1;&#x7406;&#xFF0C;&#x8D44;&#x6E90;&#x7BA1;&#x7406;</h2>
<p>&#x7C7B;&#x4F3C;&#x4E0E; JavaScript &#x7684; npm&#xFF0C;Flutter&#xFF0C;&#x4E5F;&#x5C31;&#x662F; Dart &#x4E5F;&#x6709;&#x81EA;&#x5DF1;&#x7684;&#x5305;&#x4ED3;&#x5E93;&#x3002;&#x4E0D;&#x8FC7;&#x9879;&#x76EE;&#x5305;&#x7684;&#x4F9D;&#x8D56;&#x4F7F;&#x7528; yaml &#x6587;&#x4EF6;&#x6765;&#x63CF;&#x8FF0;:</p>
<pre class="language-"><code class="lang-dart">name<span class="token punctuation">:</span> app
description<span class="token punctuation">:</span> A <span class="token keyword">new</span> <span class="token class-name">Flutter</span> project<span class="token punctuation">.</span>
version<span class="token punctuation">:</span> <span class="token number">1.0</span><span class="token number">.0</span><span class="token operator">+</span><span class="token number">1</span>

environment<span class="token punctuation">:</span>
  sdk<span class="token punctuation">:</span> <span class="token string">&quot;&gt;=2.1.0 &lt;3.0.0&quot;</span>

dependencies<span class="token punctuation">:</span>
  flutter<span class="token punctuation">:</span>
    sdk<span class="token punctuation">:</span> flutter

  cupertino_icons<span class="token punctuation">:</span> <span class="token operator">^</span><span class="token number">0.1</span><span class="token number">.2</span>
</code></pre>
<h2 id="&#x751F;&#x547D;&#x5468;&#x671F;"><a name="&#x751F;&#x547D;&#x5468;&#x671F;" class="anchor-navigation-ex-anchor" href="#&#x751F;&#x547D;&#x5468;&#x671F;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x751F;&#x547D;&#x5468;&#x671F;</h2>
<p>&#x79FB;&#x52A8;&#x5E94;&#x7528;&#x603B;&#x5F52;&#x9700;&#x8981;&#x5E94;&#x7528;&#x7EA7;&#x522B;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#xFF0C;flutter &#x4E2D;&#x4F7F;&#x7528;&#x751F;&#x547D;&#x5468;&#x671F;&#x94A9;&#x5B50;&#xFF0C;&#x4E5F;&#x975E;&#x5E38;&#x7684;&#x7B80;&#x5355;&#xFF1A;</p>
<pre class="language-"><code class="lang-dart"><span class="token keyword">class</span> <span class="token class-name">MyApp</span> <span class="token keyword">extends</span> <span class="token class-name">StatefulWidget</span> <span class="token punctuation">{</span>
  <span class="token metadata symbol">@override</span>
  _MyAppState <span class="token function">createState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token keyword">new</span> <span class="token class-name">_MyAppState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">_MyAppState</span> <span class="token keyword">extends</span> <span class="token class-name">State</span><span class="token operator">&lt;</span>MyApp<span class="token operator">&gt;</span> <span class="token keyword">with</span> WidgetsBindingObserver <span class="token punctuation">{</span>
  <span class="token metadata symbol">@override</span>
  <span class="token keyword">void</span> <span class="token function">initState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">initState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    WidgetsBinding<span class="token punctuation">.</span>instance<span class="token punctuation">.</span><span class="token function">addObserver</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token metadata symbol">@override</span>
  <span class="token keyword">void</span> <span class="token function">dispose</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    WidgetsBinding<span class="token punctuation">.</span>instance<span class="token punctuation">.</span><span class="token function">removeObserver</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">dispose</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token metadata symbol">@override</span>
  <span class="token keyword">void</span> <span class="token function">didChangeAppLifecycleState</span><span class="token punctuation">(</span>AppLifecycleState state<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">switch</span> <span class="token punctuation">(</span>state<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">case</span> AppLifecycleState<span class="token punctuation">.</span>inactive<span class="token punctuation">:</span>
        <span class="token function">print</span><span class="token punctuation">(</span><span class="token string">&apos;AppLifecycleState.inactive&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">break</span><span class="token punctuation">;</span>
      <span class="token keyword">case</span> AppLifecycleState<span class="token punctuation">.</span>paused<span class="token punctuation">:</span>
        <span class="token function">print</span><span class="token punctuation">(</span><span class="token string">&apos;AppLifecycleState.paused&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">break</span><span class="token punctuation">;</span>
      <span class="token keyword">case</span> AppLifecycleState<span class="token punctuation">.</span>resumed<span class="token punctuation">:</span>
        <span class="token function">print</span><span class="token punctuation">(</span><span class="token string">&apos;AppLifecycleState.resumed&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">break</span><span class="token punctuation">;</span>
      <span class="token keyword">case</span> AppLifecycleState<span class="token punctuation">.</span>suspending<span class="token punctuation">:</span>
        <span class="token function">print</span><span class="token punctuation">(</span><span class="token string">&apos;AppLifecycleState.suspending&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">break</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">didChangeAppLifecycleState</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token metadata symbol">@override</span>
  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token function">Container</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<h2 id="&#x4F7F;&#x7528;&#x539F;&#x751F;&#x80FD;&#x529B;"><a name="&#x4F7F;&#x7528;&#x539F;&#x751F;&#x80FD;&#x529B;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;&#x539F;&#x751F;&#x80FD;&#x529B;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;&#x539F;&#x751F;&#x80FD;&#x529B;</h2>
<p>&#x7531;&#x4E8E;Flutter&#x672C;&#x8EAB;&#x53EA;&#x662F;&#x4E00;&#x4E2A;UI&#x7CFB;&#x7EDF;&#xFF0C;&#x5B83;&#x672C;&#x8EAB;&#x662F;&#x65E0;&#x6CD5;&#x63D0;&#x4F9B;&#x4E00;&#x4E9B;&#x7CFB;&#x7EDF;&#x80FD;&#x529B;&#xFF0C;&#x6BD4;&#x5982;&#x4F7F;&#x7528;&#x84DD;&#x7259;&#x3001;&#x76F8;&#x673A;&#x3001;GPS&#x7B49;&#xFF0C;&#x56E0;&#x6B64;&#x8981;&#x5728;Flutter APP&#x4E2D;&#x8C03;&#x7528;&#x8FD9;&#x4E9B;&#x80FD;&#x529B;&#x5C31;&#x5FC5;&#x987B;&#x548C;&#x539F;&#x751F;&#x5E73;&#x53F0;&#x8FDB;&#x884C;&#x901A;&#x4FE1;&#x3002;&#x4E3A;&#x6B64;&#xFF0C;Flutter&#x4E2D;&#x63D0;&#x4F9B;&#x4E86;&#x4E00;&#x4E2A;&#x5E73;&#x53F0;&#x901A;&#x9053;&#xFF08;platform channel&#xFF09;&#xFF0C;&#x7528;&#x4E8E;Flutter&#x548C;&#x539F;&#x751F;&#x5E73;&#x53F0;&#x7684;&#x901A;&#x4FE1;&#x3002;&#x5E73;&#x53F0;&#x901A;&#x9053;&#x6B63;&#x662F;Flutter&#x548C;&#x539F;&#x751F;&#x4E4B;&#x95F4;&#x901A;&#x4FE1;&#x7684;&#x6865;&#x6881;&#xFF0C;&#x5B83;&#x4E5F;&#x662F;Flutter&#x63D2;&#x4EF6;&#x7684;&#x5E95;&#x5C42;&#x57FA;&#x7840;&#x8BBE;&#x65BD;&#x3002;</p>
<p>Flutter&#x4F7F;&#x7528;&#x4E86;&#x4E00;&#x4E2A;&#x7075;&#x6D3B;&#x7684;&#x7CFB;&#x7EDF;&#xFF0C;&#x5141;&#x8BB8;&#x60A8;&#x8C03;&#x7528;&#x7279;&#x5B9A;&#x5E73;&#x53F0;&#x7684;API&#xFF0C;&#x65E0;&#x8BBA;&#x5728;Android&#x4E0A;&#x7684;Java&#x6216;Kotlin&#x4EE3;&#x7801;&#x4E2D;&#xFF0C;&#x8FD8;&#x662F;iOS&#x4E0A;&#x7684;ObjectiveC&#x6216;Swift&#x4EE3;&#x7801;&#x4E2D;&#x5747;&#x53EF;&#x7528;&#x3002;</p>
<p>Flutter&#x4E0E;&#x539F;&#x751F;&#x4E4B;&#x95F4;&#x7684;&#x901A;&#x4FE1;&#x4F9D;&#x8D56;&#x7075;&#x6D3B;&#x7684;&#x6D88;&#x606F;&#x4F20;&#x9012;&#x65B9;&#x5F0F;&#xFF1A;</p>
<ul>
<li>&#x5E94;&#x7528;&#x7684;Flutter&#x90E8;&#x5206;&#x901A;&#x8FC7;&#x5E73;&#x53F0;&#x901A;&#x9053;&#xFF08;platform channel&#xFF09;&#x5C06;&#x6D88;&#x606F;&#x53D1;&#x9001;&#x5230;&#x5176;&#x5E94;&#x7528;&#x7A0B;&#x5E8F;&#x7684;&#x6240;&#x5728;&#x7684;&#x5BBF;&#x4E3B;&#xFF08;iOS&#x6216;Android&#xFF09;&#x5E94;&#x7528;&#xFF08;&#x539F;&#x751F;&#x5E94;&#x7528;&#xFF09;&#x3002;</li>
<li>&#x5BBF;&#x4E3B;&#x76D1;&#x542C;&#x5E73;&#x53F0;&#x901A;&#x9053;&#xFF0C;&#x5E76;&#x63A5;&#x6536;&#x8BE5;&#x6D88;&#x606F;&#x3002;&#x7136;&#x540E;&#x5B83;&#x4F1A;&#x8C03;&#x7528;&#x8BE5;&#x5E73;&#x53F0;&#x7684;API&#xFF0C;&#x5E76;&#x5C06;&#x54CD;&#x5E94;&#x53D1;&#x9001;&#x56DE;&#x5BA2;&#x6237;&#x7AEF;&#xFF0C;&#x5373;&#x5E94;&#x7528;&#x7A0B;&#x5E8F;&#x7684;Flutter&#x90E8;&#x5206;&#x3002;</li>
</ul>
<p>&#x4F7F;&#x7528;&#x5E73;&#x53F0;&#x901A;&#x9053;&#x5728;Flutter(client)&#x548C;&#x539F;&#x751F;(host)&#x4E4B;&#x95F4;&#x4F20;&#x9012;&#x6D88;&#x606F;&#xFF0C;&#x5982;&#x4E0B;&#x56FE;&#x6240;&#x793A;&#xFF1A;</p>
<p><img src="https://i.loli.net/2019/11/17/dxeyFgozOifRMHP.png" alt="7.jpg"></p>
<p>&#x5F53;&#x5728;Flutter&#x4E2D;&#x8C03;&#x7528;&#x539F;&#x751F;&#x65B9;&#x6CD5;&#x65F6;&#xFF0C;&#x8C03;&#x7528;&#x4FE1;&#x606F;&#x901A;&#x8FC7;&#x5E73;&#x53F0;&#x901A;&#x9053;&#x4F20;&#x9012;&#x5230;&#x539F;&#x751F;&#xFF0C;&#x539F;&#x751F;&#x6536;&#x5230;&#x8C03;&#x7528;&#x4FE1;&#x606F;&#x540E;&#x65B9;&#x53EF;&#x6267;&#x884C;&#x6307;&#x5B9A;&#x7684;&#x64CD;&#x4F5C;&#xFF0C;&#x5982;&#x9700;&#x8FD4;&#x56DE;&#x6570;&#x636E;&#xFF0C;&#x5219;&#x539F;&#x751F;&#x4F1A;&#x5C06;&#x6570;&#x636E;&#x518D;&#x901A;&#x8FC7;&#x5E73;&#x53F0;&#x901A;&#x9053;&#x4F20;&#x9012;&#x7ED9;Flutter&#x3002;&#x503C;&#x5F97;&#x6CE8;&#x610F;&#x7684;&#x662F;&#x6D88;&#x606F;&#x4F20;&#x9012;&#x662F;&#x5F02;&#x6B65;&#x7684;&#xFF0C;&#x8FD9;&#x786E;&#x4FDD;&#x4E86;&#x7528;&#x6237;&#x754C;&#x9762;&#x5728;&#x6D88;&#x606F;&#x4F20;&#x9012;&#x65F6;&#x4E0D;&#x4F1A;&#x88AB;&#x6302;&#x8D77;&#x3002;</p>
<p>&#x5728;&#x5BA2;&#x6237;&#x7AEF;&#xFF0C;<a href="https://docs.flutter.io/flutter/services/MethodChannel-class.html" target="_blank">MethodChannel API</a> &#x53EF;&#x4EE5;&#x53D1;&#x9001;&#x4E0E;&#x65B9;&#x6CD5;&#x8C03;&#x7528;&#x76F8;&#x5BF9;&#x5E94;&#x7684;&#x6D88;&#x606F;&#x3002; &#x5728;&#x5BBF;&#x4E3B;&#x5E73;&#x53F0;&#x4E0A;&#xFF0C;MethodChannel &#x5728;<a href="https://docs.flutter.io/javadoc/io/flutter/plugin/common/MethodChannel.html" target="_blank">Android API</a> &#x548C; <a href="https://docs.flutter.io/objcdoc/Classes/FlutterMethodChannel.html" target="_blank">FlutterMethodChannel iOS API</a>&#x53EF;&#x4EE5;&#x63A5;&#x6536;&#x65B9;&#x6CD5;&#x8C03;&#x7528;&#x5E76;&#x8FD4;&#x56DE;&#x7ED3;&#x679C;&#x3002;&#x8FD9;&#x4E9B;&#x7C7B;&#x53EF;&#x4EE5;&#x5E2E;&#x52A9;&#x6211;&#x4EEC;&#x7528;&#x5F88;&#x5C11;&#x7684;&#x4EE3;&#x7801;&#x5C31;&#x80FD;&#x5F00;&#x53D1;&#x5E73;&#x53F0;&#x63D2;&#x4EF6;&#x3002;</p>
<blockquote>
<p>&#x6CE8;&#x610F;: &#x5982;&#x679C;&#x9700;&#x8981;&#xFF0C;&#x65B9;&#x6CD5;&#x8C03;&#x7528;(&#x6D88;&#x606F;&#x4F20;&#x9012;)&#x53EF;&#x4EE5;&#x662F;&#x53CD;&#x5411;&#x7684;&#xFF0C;&#x5373;&#x5BBF;&#x4E3B;&#x4F5C;&#x4E3A;&#x5BA2;&#x6237;&#x7AEF;&#x8C03;&#x7528;Dart&#x4E2D;&#x5B9E;&#x73B0;&#x7684;API&#x3002; quick_actions&#x63D2;&#x4EF6;&#x5C31;&#x662F;&#x4E00;&#x4E2A;&#x5177;&#x4F53;&#x7684;&#x4F8B;&#x5B50;&#x3002;</p>
</blockquote>
<h3 id="&#x5982;&#x4F55;&#x83B7;&#x53D6;&#x5E73;&#x53F0;&#x4FE1;&#x606F;"><a name="&#x5982;&#x4F55;&#x83B7;&#x53D6;&#x5E73;&#x53F0;&#x4FE1;&#x606F;" class="anchor-navigation-ex-anchor" href="#&#x5982;&#x4F55;&#x83B7;&#x53D6;&#x5E73;&#x53F0;&#x4FE1;&#x606F;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x5982;&#x4F55;&#x83B7;&#x53D6;&#x5E73;&#x53F0;&#x4FE1;&#x606F;</h3>
<p>Flutter &#x4E2D;&#x63D0;&#x4F9B;&#x4E86;&#x4E00;&#x4E2A;&#x5168;&#x5C40;&#x53D8;&#x91CF;defaultTargetPlatform&#x6765;&#x83B7;&#x53D6;&#x5F53;&#x524D;&#x5E94;&#x7528;&#x7684;&#x5E73;&#x53F0;&#x4FE1;&#x606F;&#xFF0C;defaultTargetPlatform&#x5B9A;&#x4E49;&#x5728;&quot;platform.dart&quot;&#x4E2D;&#xFF0C;&#x5B83;&#x7684;&#x7C7B;&#x578B;&#x662F;TargetPlatform&#xFF0C;&#x8FD9;&#x662F;&#x4E00;&#x4E2A;&#x679A;&#x4E3E;&#x7C7B;&#xFF0C;&#x5B9A;&#x4E49;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre class="language-"><code class="lang-dart"><span class="token keyword">enum</span> TargetPlatform <span class="token punctuation">{</span>
  android<span class="token punctuation">,</span>
  fuchsia<span class="token punctuation">,</span>
  iOS<span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre>
<p>&#x53EF;&#x4EE5;&#x770B;&#x5230;&#x76EE;&#x524D;Flutter&#x53EA;&#x652F;&#x6301;&#x8FD9;&#x4E09;&#x4E2A;&#x5E73;&#x53F0;&#x3002;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x5982;&#x4E0B;&#x4EE3;&#x7801;&#x5224;&#x65AD;&#x5E73;&#x53F0;&#xFF1A;</p>
<pre class="language-"><code class="lang-dart"><span class="token keyword">if</span><span class="token punctuation">(</span>defaultTargetPlatform<span class="token operator">==</span>TargetPlatform<span class="token punctuation">.</span>android<span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token comment">// &#x662F;&#x5B89;&#x5353;&#x7CFB;&#x7EDF;&#xFF0C;do something</span>
  <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
</code></pre>
<p>&#x7531;&#x4E8E;&#x4E0D;&#x540C;&#x5E73;&#x53F0;&#x6709;&#x5B83;&#x4EEC;&#x5404;&#x81EA;&#x7684;&#x4EA4;&#x4E92;&#x89C4;&#x8303;&#xFF0C;Flutter Material&#x5E93;&#x4E2D;&#x7684;&#x4E00;&#x4E9B;&#x7EC4;&#x4EF6;&#x90FD;&#x9488;&#x5BF9;&#x76F8;&#x5E94;&#x7684;&#x5E73;&#x53F0;&#x505A;&#x4E86;&#x4E00;&#x4E9B;&#x9002;&#x914D;&#xFF0C;&#x6BD4;&#x5982;&#x8DEF;&#x7531;&#x7EC4;&#x4EF6;MaterialPageRoute&#xFF0C;&#x5B83;&#x5728;android&#x548C;ios&#x4E2D;&#x4F1A;&#x5E94;&#x7528;&#x5404;&#x81EA;&#x5E73;&#x53F0;&#x89C4;&#x8303;&#x7684;&#x5207;&#x6362;&#x52A8;&#x753B;&#x3002;&#x90A3;&#x5982;&#x679C;&#x6211;&#x4EEC;&#x60F3;&#x8BA9;&#x6211;&#x4EEC;&#x7684;APP&#x5728;&#x6240;&#x6709;&#x5E73;&#x53F0;&#x90FD;&#x8868;&#x73B0;&#x4E00;&#x81F4;&#xFF0C;&#x6BD4;&#x5982;&#x5E0C;&#x671B;&#x5728;&#x6240;&#x6709;&#x5E73;&#x53F0;&#x8DEF;&#x7531;&#x5207;&#x6362;&#x52A8;&#x753B;&#x90FD;&#x6309;&#x7167;ios&#x5E73;&#x53F0;&#x4E00;&#x81F4;&#x7684;&#x5DE6;&#x53F3;&#x6ED1;&#x52A8;&#x5207;&#x6362;&#x98CE;&#x683C;&#x8BE5;&#x600E;&#x4E48;&#x505A;&#xFF1F;Flutter&#x4E2D;&#x63D0;&#x4F9B;&#x4E86;&#x4E00;&#x79CD;&#x8986;&#x76D6;&#x9ED8;&#x8BA4;&#x5E73;&#x53F0;&#x7684;&#x673A;&#x5236;&#xFF0C;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x663E;&#x5F0F;&#x6307;&#x5B9A;debugDefaultTargetPlatformOverride&#x5168;&#x5C40;&#x53D8;&#x91CF;&#x7684;&#x503C;&#x6765;&#x6307;&#x5B9A;&#x5E94;&#x7528;&#x5E73;&#x53F0;&#x3002;&#x6BD4;&#x5982;&#xFF1A;</p>
<pre class="language-"><code class="lang-dart">debugDefaultTargetPlatformOverride<span class="token operator">=</span>TargetPlatform<span class="token punctuation">.</span>iOS<span class="token punctuation">;</span>
<span class="token function">print</span><span class="token punctuation">(</span>defaultTargetPlatform<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &#x4F1A;&#x8F93;&#x51FA;TargetPlatform.iOS</span>
</code></pre>
<p>&#x4E0A;&#x9762;&#x4EE3;&#x7801;&#x5373;&#x5728;Android&#x4E2D;&#x8FD0;&#x884C;&#x540E;&#xFF0C;Flutter APP&#x5C31;&#x4F1A;&#x8BA4;&#x4E3A;&#x662F;&#x5F53;&#x524D;&#x7CFB;&#x7EDF;&#x662F;iOS&#xFF0C;Material&#x7EC4;&#x4EF6;&#x5E93;&#x4E2D;&#x6240;&#x6709;&#x7EC4;&#x4EF6;&#x4EA4;&#x4E92;&#x65B9;&#x5F0F;&#x90FD;&#x4F1A;&#x548C;iOS&#x5E73;&#x53F0;&#x5BF9;&#x9F50;&#xFF0C;defaultTargetPlatform&#x7684;&#x503C;&#x4E5F;&#x4F1A;&#x53D8;&#x4E3A;TargetPlatform.iOS&#x3002;</p>
<h2 id="flutter-web-flutter-desktop"><a name="flutter-web-flutter-desktop" class="anchor-navigation-ex-anchor" href="#flutter-web-flutter-desktop"><i class="fa fa-link" aria-hidden="true"></i></a>Flutter Web, Flutter Desktop</h2>
<p>&#x8FD9;&#x4E9B;&#x8FD8;&#x5728;&#x5F00;&#x53D1;&#x5F53;&#x4E2D;&#xFF0C;&#x9274;&#x4E8E;&#x5BF9; Dart &#x559C;&#x6B22;&#xFF0C;&#x4EE5;&#x53CA;&#x5BF9; Flutter &#x6027;&#x80FD;&#x7684;&#x4E50;&#x89C2;&#xFF0C;&#x8FD9;&#x4E9B;&#x5012;&#x662F;&#x5F88;&#x503C;&#x5F97;&#x671F;&#x5F85;&#x3002;</p>
<p>&#x8FD8;&#x8BB0;&#x5F97;&#x5E73;&#x53F0;&#x53EA;&#x662F;&#x7ED9; Flutter &#x63D0;&#x4F9B;&#x4E00;&#x4E2A;&#x753B;&#x5E03;&#x4E48;&#xFF0C;Flutter Desktop &#x672A;&#x6765;&#x66F4;&#x662F;&#x53EF;&#x4EE5;&#x5927;&#x6709;&#x53EF;&#x4E3A;&#x7684;&#xFF0C;&#x76F8;&#x5173;&#x53EF;&#x4EE5;&#x770B;<a href="https://github.com/flutter/flutter/wiki/Desktop-shells" target="_blank">&#x8FD9;&#x91CC;</a></p>
<p>&#x6700;&#x540E;&#x6BCF;&#x79CD;&#x65B9;&#x6848;&#xFF0C;&#x6BCF;&#x79CD;&#x6280;&#x672F;&#x90FD;&#x6709;&#x4F18;&#x7F3A;&#x70B9;&#xFF0C;&#x751A;&#x81F3;&#x6280;&#x672F;&#x7684;&#x67B6;&#x6784;&#x51B3;&#x5B9A;&#x4E86;&#xFF0C;&#x6709;&#x4E9B;&#x7F3A;&#x9677;&#x53EF;&#x80FD;&#x6C38;&#x8FDC;&#x90FD;&#x6CA1;&#x6CD5;&#x6539;&#x8FDB;&#xFF0C;&#x73B0;&#x5728;&#x7684;Flutter&#x5708;&#x5B50; &#x548C;&#x793E;&#x533A;&#x6BD4;RN&#x6765;&#x8BF4; &#x8FD8;&#x662F;&#x6BD4;&#x8F83;&#x5C0F;&#x7684;&#xFF0C;&#x6240;&#x4EE5;&#x3002;&#x3002;&#x3002;</p>
<footer class="page-footer"><span class="copyright">Copyright &#xA9; YoungGary 2019 all right reserved&#xFF0C;powered by Gitbook</span><span class="footer-modification">&#x8BE5;&#x6587;&#x4EF6;&#x4FEE;&#x8BA2;&#x65F6;&#x95F4;&#xFF1A;
2020-01-03 16:31:06
</span></footer>
                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="image.html" class="navigation navigation-prev " aria-label="Previous page: 5.Image组件">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="../vue/" class="navigation navigation-next " aria-label="Next page: Vue组件精讲">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"6.Flutter 技术总结","level":"1.3.6","depth":2,"next":{"title":"Vue组件精讲","level":"1.4","depth":1,"path":"vue/README.md","ref":"vue/README.md","articles":[{"title":"1.provide/inject","level":"1.4.1","depth":2,"path":"vue/1.md","ref":"vue/1.md","articles":[]},{"title":"2.手动实现broadcast和dispatch方法","level":"1.4.2","depth":2,"path":"vue/2.md","ref":"vue/2.md","articles":[]},{"title":"3.自己动手实现带校验的Form表单组件","level":"1.4.3","depth":2,"path":"js/form.md","ref":"js/form.md","articles":[]}]},"previous":{"title":"5.Image组件","level":"1.3.5","depth":2,"path":"flutter/image.md","ref":"flutter/image.md","articles":[]},"dir":"ltr"},"config":{"plugins":["theme-comscore","prism","-highlight","copy-code-button","search-pro","-search","-lunr","expandable-chapters","splitter","-sharing","tbfed-pagefooter","anchor-navigation-ex"],"styles":{},"pluginsConfig":{"tbfed-pagefooter":{"copyright":"Copyright &copy YoungGary 2019","modify_label":"该文件修订时间：","modify_format":"YYYY-MM-DD HH:mm:ss"},"prism":{"css":["prismjs/themes/prism-solarizedlight.css"],"lang":{"shell":"bash"}},"splitter":{},"search-pro":{},"fontsettings":{"theme":"white","family":"sans","size":2},"anchor-navigation-ex":{"associatedWithSummary":true,"float":{"floatIcon":"fa fa-navicon","level1Icon":"","level2Icon":"","level3Icon":"","showLevelIcon":false},"mode":"float","multipleH1":true,"pageTop":{"level1Icon":"","level2Icon":"","level3Icon":"","showLevelIcon":false},"printLog":false,"showGoTop":true,"showLevel":false},"theme-comscore":{},"copy-code-button":{},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false},"expandable-chapters":{}},"theme":"default","author":"Gary","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"Gary的小窝","language":"zh-hans","gitbook":"*","description":"Gary的小窝. 里面包含了个人撰写的技术文章"},"file":{"path":"flutter/chapter2.md","mtime":"2020-01-03T08:31:06.068Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2021-09-09T14:10:10.930Z"},"basePath":"..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../gitbook/gitbook.js"></script>
    <script src="../gitbook/theme.js"></script>
    
        
        <script src="../gitbook/gitbook-plugin-copy-code-button/toggle.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search-pro/jquery.mark.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search-pro/search.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-expandable-chapters/expandable-chapters.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-splitter/splitter.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-theme-comscore/test.js"></script>
        
    

    </body>
</html>

